twitter-bootstrap Bootstrap 3 中的堆叠标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18432577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stacked Tabs in Bootstrap 3
提问by osmbergs
I am trying to implement left-aligned stacked tabs using the Tab jquery plugin in Bootstrap 3 where tabs are rendered vertically to the left of tab content, rather than on top. When I try the following;
我正在尝试使用 Bootstrap 3 中的 Tab jquery 插件实现左对齐的堆叠选项卡，其中选项卡垂直呈现在选项卡内容的左侧，而不是顶部。当我尝试以下操作时；
<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>
Tabs are stacked on top of each other, but are not properly rendered as being turned to the left, instead they are just horizontal tabs stuck on top of each other. Tab content is properly shown/hidden in the content divs.
标签堆叠在彼此的顶部，但在向左转动时没有正确呈现，相反，它们只是粘在彼此顶部的水平标签。标签内容在内容 div 中正确显示/隐藏。
This was handled in Bootstrap 2.x using the tab-leftand tab-rightclasses, but this is deprecated in Bootstrap 3 and doesn't really seem to be replaced with anything. Does anyone know if proper left-right tab rendering is possible in the Bootstrap 3 Tab plugin?
这是在 Bootstrap 2.x 中使用tab-left和tab-right类处理的，但这在 Bootstrap 3 中已被弃用，并且似乎并没有真正被任何东西取代。有谁知道在 Bootstrap 3 Tab 插件中是否可以进行适当的左右选项卡渲染？
回答by Zim
Left, Right and Below tabs were removed from Bootstrap 3, but you can add custom CSS to achieve this..
左、右和下方选项卡已从 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;
}
Working example: http://bootply.com/74926
工作示例：http: //bootply.com/74926
UPDATE
更新
If you don't need the exact look of a tab (bordered appropriately on the left or right as each tab is activated), you can simple use nav-stacked, along with Bootstrap col-*to float the tabs to the left or right...
如果您不需要选项卡的确切外观（在每个选项卡被激活时在左侧或右侧适当地加边框），您可以简单地使用nav-stacked，与 Bootstrapcol-*一起将选项卡浮动到左侧或右侧...
nav-stackeddemo: http://codeply.com/go/rv3Cvr0lZ4
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>
回答by David Lemayian
The Bootstrap team seems to have removed it. See here: https://github.com/twbs/bootstrap/issues/8922. @Skelly's answer involves custom css which I didn't want to do so I used the grid system and nav-pills. It worked fine and looked great. The code looks like so:
Bootstrap 团队似乎已将其删除。请参阅此处：https: //github.com/twbs/bootstrap/issues/8922。@Skelly 的回答涉及我不想这样做的自定义 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>
You can see this in action here: http://bootply.com/81948
你可以在这里看到这个：http: //bootply.com/81948
[Update]@SeanK gives the option of not having to enable the nav-pills through Javascript and instead using data-toggle="pill". Check it out here: http://bootply.com/96067. Thanks Sean.
[更新]@SeanK 提供了不必通过 Javascript 启用导航药丸的选项，而是使用data-toggle="pill". 在这里查看：http: //bootply.com/96067。谢谢肖恩。
回答by dbtek
To get left and right tabs (now also with sideways) support for Bootstrap 3, bootstrap-vertical-tabs component can be used.
要获得对 Bootstrap 3 的左右选项卡（现在也有横向）支持，可以使用 bootstrap-vertical-tabs 组件。
回答by Neil Monroe
You should not need to add this back in. This was removed purposefully. The documentation has changed somewhat and the CSS class that is necessary ("nav-stacked") is only mentioned under the pills component, but should work for tabs as well.
您不需要重新添加它。这是有意删除的。文档有所更改，必要的 CSS 类（“nav-stacked”）仅在药丸组件下提及，但也适用于选项卡。
This tutorial shows how to use the Bootstrap 3 setup properly to do vertical tabs:
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills
本教程展示了如何正确使用 Bootstrap 3 设置来执行垂直选项卡：
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills
