Pestañas apiladas en Bootstrap 3


157

Estoy tratando de implementar pestañas apiladas alineadas a la izquierda usando el complemento Tab jquery en Bootstrap 3, donde las pestañas se representan verticalmente a la izquierda del contenido de la pestaña, en lugar de en la parte superior. Cuando intento lo siguiente;

   <ul class="nav nav-tabs nav-stacked">
        <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    </ul>


    <div class="tab-content">
        <div class="tab-pane fade" id="tab1">
            Tab 1 content
        </div>
        <div class="tab-pane fade" id="tab2">
            Tab 2 content              
        </div>
        <div class="tab-pane fade" id="tab3">
            Tab 3 content
        </div>
    </div>

Las pestañas se apilan una encima de la otra, pero no se representan correctamente como giradas hacia la izquierda, sino que son pestañas horizontales pegadas una encima de la otra. El contenido de la pestaña se muestra / oculta correctamente en los divs de contenido.

Esto se manejó en Bootstrap 2.x usando las clases tab-left y tab-right , pero esto está en desuso en Bootstrap 3 y realmente no parece ser reemplazado por nada. ¿Alguien sabe si es posible la representación adecuada de la pestaña izquierda-derecha en el complemento Bootstrap 3 Tab?


1
Puede usar la .navclase solo, luego con la cuadrícula establecer el ancho de la navegación y su contenido. No es necesario un 'navegador apilado' ya que .navestá apilado de forma predeterminada.
Patrick Berkeley

Respuestas:


236

Las pestañas izquierda, derecha e inferior se eliminaron de Bootstrap 3, pero puede agregar CSS personalizado para lograr esto.

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}

Ejemplo de trabajo: http://bootply.com/74926

ACTUALIZAR

Si no necesita el aspecto exacto de una pestaña (delimitada adecuadamente a la izquierda o derecha a medida que se activa cada pestaña), puede usarla de manera simple nav-stacked, junto con Bootstrap, col-*para flotar las pestañas a la izquierda o derecha ...

nav-stackeddemostración: http://codeply.com/go/rv3Cvr0lZ4

<ul class="nav nav-pills nav-stacked col-md-3">
    <li><a href="#a" data-toggle="tab">1</a></li>
    <li><a href="#b" data-toggle="tab">2</a></li>
    <li><a href="#c" data-toggle="tab">3</a></li>
</ul>

33
Esto resuelve perfectamente el problema. Sin embargo, aún me pregunto por qué sacaron esto de Bootstrap 3.
osmbergs

24
¿Por qué fue eliminado? oO
roosevelt

44
Sí, el .nav solo está apilado, pero no parece una pestaña (bordes izquierdo, derecho apropiados) cuando está seleccionado / activo. Ese es el propósito de las pestañas.
Zim

17
No debería necesitar agregar esto nuevamente. Esto se eliminó a propósito. Consulte la documentación oficial de Bootstrap sobre cómo debe manejar esto ahora en JavaScript / Tabs. Consulte también este tutorial sobre cómo usar la configuración de Bootstrap 3 correctamente para hacer pestañas verticales. tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills
Neil Monroe

3
para contenido de texto simple, cualquiera de las soluciones está bien. Si alguien más se enfrenta al problema del que estoy hablando: la solución de @ dbtek funcionó mejor: bootstrap-vertical-tabs . Solo tenía que incluir el archivo CSS ... ¡gracias @dbtek!
msanjay

47

El equipo de Bootstrap parece haberlo eliminado. Ver aquí: https://github.com/twbs/bootstrap/issues/8922 . La respuesta de @ Skelly involucra CSS personalizado que no quería hacer, así que utilicé el sistema de cuadrícula y las píldoras de navegación. Funcionó bien y se veía genial. El código se ve así:

<div class="row">

  <!-- Navigation Buttons -->
  <div class="col-md-3">
    <ul class="nav nav-pills nav-stacked" id="myTabs">
      <li class="active"><a href="#home" data-toggle="pill">Home</a></li>
      <li><a href="#profile" data-toggle="pill">Profile</a></li>
      <li><a href="#messages" data-toggle="pill">Messages</a></li>
    </ul>
  </div>

  <!-- Content -->
  <div class="col-md-9">
    <div class="tab-content">
      <div class="tab-pane active" id="home">Home</div>
      <div class="tab-pane" id="profile">Profile</div>
      <div class="tab-pane" id="messages">Messages</div>
    </div>
  </div>

</div>

Puede ver esto en acción aquí: http://bootply.com/81948

[Actualización] @SeanK ofrece la opción de no tener que habilitar las píldoras de navegación a través de Javascript y, en su lugar, usarlas data-toggle="pill". Compruébalo aquí: http://bootply.com/96067 . Gracias Sean


10
No necesita incluir el javascript. Si agrega data-toggle = "pill" a cada etiqueta a, funcionará automáticamente con bootstrap. Puedes ver aquí: bootply.com/96067
SeanK

Gracias @SeanK. Lo he agregado a la respuesta.
David Lemayian

esto fue agradable y hubiera preferido esto sin el CSS personalizado, pero las pestañas de @ Skelly tienen una apariencia y una relación más 'continuas' entre la pestaña activa y el contenido. Sería bueno si se pudiera lograr lo mismo de alguna manera aquí, pero no podría entender cómo. Hice un tenedor reduciendo solo un ejemplo por simplicidad: bootply.com/QZfrLF0XjD
msanjay

1
Por otro lado, puse contenido coloreado y esto pareció manejarlo mucho mejor que el enfoque aceptado. ver bootply.com/SeQ6z7fhbQ y bootply.com/cre9NpmXpA
msanjay


9

No debería necesitar agregar esto nuevamente. Esto se eliminó a propósito. La documentación ha cambiado un poco y la clase de CSS que es necesaria ("apilada por navegación") solo se menciona en el componente de píldoras, pero también debería funcionar para las pestañas.

Este tutorial muestra cómo usar la configuración de Bootstrap 3 correctamente para hacer pestañas verticales:
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills


Lo han eliminado por completo ahora. Vea el enlace de arriba para el procedimiento.
Neil Monroe

Muchas gracias. El artículo al que se vinculó proporciona ejemplos prácticos y prácticos y mucha explicación. Esto es justo lo que estaba buscando.
Aluan Haddad

Por lo que vale, esto solo parece correcto para las píldoras de navegación. las pestañas de navegación se apilarán, pero el estilo se ve como pestañas horizontales en la parte superior. Dado que el OP preguntó específicamente sobre las pestañas de navegación, no creo que esto pueda considerarse una respuesta aceptable.
Jay Mathis

¡La URL ya no funciona! ¡Esta respuesta entonces no tiene sentido!
Bobort
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.