twitter bootstrap - sombreados - cómo dar un borde al contenido de la pestaña de arranque

sombreado en word

Question

Estoy usando pestañas de arranque y funciona perfectamente. Estoy tratando de averiguar si hay una forma de usar el programa de arranque para dar un borde al contenido de las pestañas que están conectadas al borde de la píldora para que se vea como una caja. Intenté hacer esto con mi propio CSS, pero hay un límite entre el borde de la pestaña y el borde del contenido de la pestaña, que es un margen que la pestaña debe tener y no puede eliminarse. Quiero que se vea como la imagen de abajo.

Answer 1

Al ser más DRY que la solución @goat, también puedes reutilizar el panel CSS como:

.tab-content.panel
{
border-top: none;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
<div>
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content panel">
<div class="tab-pane panel-body">
...
</div>
</div>
</div>

panel de contenido de pestaña panel predeterminado y panel de pestaña panel cuerpo. Entonces no necesita redefinir el borde y el relleno. Simplemente quite el borde superior y el radio superior.

Answer 2

Con el siguiente código, todas las esquinas tienen radio, pero las pestañas se compensan.

.nav-tabs {
padding-left: 15px;
margin-bottom: 0;
border: none;
}
.tab-content {
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
}

Precaución: si configura el relleno de nav-tab-left 0px, la primera pestaña entra en conflicto con el radio de contenido superior izquierdo.

Answer 3

El siguiente CSS debería hacer exactamente lo que estás buscando :)

.tab-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
padding: 10px;
}
.nav-tabs {
margin-bottom: 0;
}

margin-bottom: 0; en .nav-tabs elimina la brecha entre las píldoras y el contenido.

El relleno en .tab-contenido hace que el contenido no se presione contra los nuevos bordes a la izquierda y derecha.

Answer 4

Esto fue preguntado hace mucho tiempo, pero el truco aquí podría ayudar a algunas personas:

Ponga en un div.container sus .nav-tabs y .tab-content . A ese div.container , dar una altura fija dice 300px y border-bottom: 1px solid #ccc y overflow: hidden !important .

Luego, al .tab-content , agrego este css: height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc; height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;

Y funciona. Pruébelo ( http://jsfiddle.net/996Bw/ )

Answer 5

Modifiqué las respuestas por @ user3749683 y @Kisuka para que no tenga que cambiar la definición de los estilos de arranque existentes. En cambio, solo agrega una nueva clase al elemento principal. Utilicé los selectores del primer niño para que pueda tener pestañas anidadas que no necesariamente necesitan tener el contenido delimitado.

.bordered-tab-contents > .tab-content > .tab-pane {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-radius: 0px 0px 5px 5px;
padding: 10px;
}
.bordered-tab-contents > .nav-tabs {
margin-bottom: 0;
}

estructura de marcado

<div class="bordered-tab-contents">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
<div class="tab-pane" ...>
...
</div>
</div>
</div>

Answer 6

Puede usar el siguiente código para lograrlo:
JSfiddle Demo

.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
border-bottom: 1px solid #dddddd;
outline:0;
}
}

Answer 7

Yo modificaría la respuesta de Kisuka a lo siguiente:

.tab-pane {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-radius: 0px 0px 5px 5px;
padding: 10px;
}
.nav-tabs {
margin-bottom: 0;
}