Bootstrap中的堆叠选项卡3

我试图在Bootstrap 3中使用Tab jquery插件实现左alignment的堆叠选项卡，其中选项卡垂直呈现在选项卡内容的左侧，而不是顶部。 当我尝试以下;

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

选项卡堆叠在一起，但不能正确地呈现为左转，而只是将水平选项卡粘在一起。 标签内容在内容div中正确显示/隐藏。

这是在Bootstrap 2.x中使用tab-left和tab-right类来处理的，但是在Bootstrap 3中不推荐使用，并且看起来并没有被任何东西替代。 有谁知道在Bootstrap 3 Tab插件中是否可以进行正确的左右选项卡渲染？

Answer 1

Left，Right和Below选项卡从Bootstrap 3中删除，但是您可以添加自定义CSS以实现此目的。

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

工作示例： http ： //bootply.com/74926

UPDATE

如果您不需要标签的精确外观（在每个标签被激活时在左边或右边适当的边界），您可以简单地使用nav-stacked ，以及Bootstrap col-*将标签浮动到左侧或右侧…

nav-stacked演示： 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> 

Answer 2

Bootstrap团队似乎已经将其删除。 看到这里： https ： //github.com/twbs/bootstrap/issues/8922 。 @斯凯利的答案涉及到自定义CSS，我不想这样做，我使用网格系统和导航药丸。 它工作得很好，看起来不错。 代码如下所示：

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

你可以在这里看到这个： http : //bootply.com/81948

[更新] @SeanK提供了不必通过Javascript启用nav-pills的选项，而是使用data-toggle="pill" 。 看看这里： http : //bootply.com/96067 。 谢谢肖恩

Answer 3

为了得到Bootstrap 3的左右标签（现在还有横向），可以使用bootstrap-vertical-tabs组件。

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

Answer 4

你不需要重新join这个。这是有目的的删除。 文档有所改变，需要的CSS类（“nav-stacked”）只在丸组件下面提到，但也应该用于制表符。

本教程显示如何正确使用Bootstrap 3设置来执行垂直制表符：
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills

Answer 5

在这里你可以看到所有带有工作示例的标签导航变体。 http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Navigations.php