Gestapelte Tabs in Bootstrap 3

Ich versuche, linksbündig gestapelte Registerkarten mithilfe des Tab-Abfrage-Plugins in Bootstrap 3 zu implementieren, bei dem Registerkarten vertikal links vom Registerkarteninhalt und nicht oben gerendert werden. Wenn ich Folgendes versuche;

   <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>

Registerkarten sind übereinander gestapelt, werden jedoch nicht richtig nach links gedreht gerendert, sondern sind nur horizontale Registerkarten, die übereinander geklebt werden. Der Inhalt der Registerkarte wird in den Inhaltsbereichen ordnungsgemäß angezeigt / ausgeblendet.

Dies wurde in Bootstrap 2.x mit den Klassen tab-left und tab-right behandelt , aber dies ist in Bootstrap 3 veraltet und scheint nicht wirklich durch irgendetwas ersetzt zu werden. Weiß jemand, ob das korrekte Rendern von Tabs von links nach rechts im Bootstrap 3-Tab-Plugin möglich ist?

Die Registerkarten "Links", "Rechts" und "Unten" wurden aus Bootstrap 3 entfernt. Sie können jedoch benutzerdefiniertes CSS hinzufügen, um dies zu erreichen.

.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;
}

Arbeitsbeispiel: http://bootply.com/74926

AKTUALISIEREN

Wenn Sie nicht das genaue Aussehen einer Registerkarte benötigen (links oder rechts entsprechend eingefasst, wenn jede Registerkarte aktiviert ist), können Sie sie nav-stackedzusammen mit Bootstrap einfach verwendencol-* die Registerkarten nach links oder rechts verschieben ...

nav-stackedDemo: 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>

Das Bootstrap-Team scheint es entfernt zu haben. Siehe hier: https://github.com/twbs/bootstrap/issues/8922 . @ Skellys Antwort beinhaltet benutzerdefiniertes CSS, was ich nicht wollte, also habe ich das Rastersystem und Navi-Pillen verwendet. Es hat gut funktioniert und sah toll aus. Der Code sieht so aus:

<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>

Sie können dies hier in Aktion sehen: http://bootply.com/81948

[Update] @SeanK bietet die Möglichkeit, die Nav-Pillen nicht über Javascript aktivieren zu müssen und stattdessen zu verwenden data-toggle="pill". Überprüfen Sie es hier: http://bootply.com/96067 . Danke Sean.

Um die Unterstützung für linke und rechte Registerkarten (jetzt auch seitwärts) für Bootstrap 3 zu erhalten, kann die Komponente bootstrap-vertical-tabs verwendet werden.

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

Sie sollten dies nicht wieder hinzufügen müssen. Dies wurde absichtlich entfernt. Die Dokumentation hat sich etwas geändert und die erforderliche CSS-Klasse ("nav-stacked") wird nur unter der Pillen-Komponente erwähnt, sollte aber auch für Registerkarten funktionieren.

Dieses Tutorial zeigt, wie Sie das Bootstrap 3-Setup richtig verwenden, um vertikale Registerkarten zu erstellen :
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills