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?
.nav
Klasse alleine verwenden und dann mit dem Raster die Breite des Navigationsgeräts und Ihren Inhalt festlegen. Keine Notwendigkeit für ein 'gestapeltes Navi', da.nav
es standardmäßig gestapelt ist.Antworten:
Die Registerkarten "Links", "Rechts" und "Unten" wurden aus Bootstrap 3 entfernt. Sie können jedoch benutzerdefiniertes CSS hinzufügen, um dies zu erreichen.
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-stacked
zusammen mit Bootstrap einfach verwendencol-*
die Registerkarten nach links oder rechts verschieben ...nav-stacked
Demo: http://codeply.com/go/rv3Cvr0lZ4quelle
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:
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.quelle
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
quelle
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
quelle