Pestañas apiladas en Bootstrap 3

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?

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>

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

Para obtener compatibilidad con las pestañas izquierda y derecha (ahora también de lado) para 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 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