Pestañas astackdas en Bootstrap 3

Estoy tratando de implementar tabs astackdas alineadas a la izquierda usando el plugin Tab jquery en Bootstrap 3, donde las tabs se muestran verticalmente a la izquierda del contenido de tabs, en lugar de en la parte superior. Cuando bash lo siguiente;

 
Tab 1 content
Tab 2 content
Tab 3 content

Las tabs se astackn una encima de la otra, pero no se representan correctamente como giradas hacia la izquierda, sino que son simplemente tabs 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á obsoleto en Bootstrap 3 y realmente no parece ser reemplazado por nada. ¿Alguien sabe si es posible la representación adecuada de las tabs izquierda-derecha en el complemento Bootstrap 3 Tab?

Las tabs Izquierda, Derecha y Debajo 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 apropiadamente a la izquierda o a la derecha a medida que se activa cada pestaña), puede usar nav-stacked , junto con Bootstrap col-* para flotar las tabs hacia la izquierda o hacia la derecha. …

demostración de nav-stacked : http://codeply.com/go/rv3Cvr0lZ4

  

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

 
Home
Profile
Messages

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

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

Para obtener las tabs izquierda y derecha (ahora también con lateral) compatible con Bootstrap 3, se puede usar el componente bootstrap-vertical-tabs.

https://github.com/dbtek/bootstrap-vertical-tabs

No debería necesitar agregar esto nuevamente. Esto fue eliminado a propósito. La documentación ha cambiado un poco y la clase de CSS que es necesaria (“nav-stacked”) solo se menciona en el componente de píldoras, pero también debería funcionar para las tabs.

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

Aquí tienes, todas las variantes de navegación con tabs con ejemplos de trabajo. http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Navigations.php