我正在尝试使用 Bootstrap 3 中的 Tab jquery 插件实现左对齐堆叠标签，其中标签垂直呈现在标签内容的左侧，而不是顶部.当我尝试以下操作时；
<div class="tab-content"><div class="tab-pane淡入淡出" id="tab1">表1内容<div class="tab-pane淡入淡出" id="tab2">表2内容
<div class="tab-pane淡入淡出" id="tab3">表3内容
选项卡彼此堆叠在一起，但在向左转动时没有正确呈现，相反，它们只是粘在彼此顶部的水平选项卡.标签内容在内容 div 中正确显示/隐藏.
这是在 Bootstrap 2.x 中使用 tab-left 和 tab-right 类处理的，但这在 Bootstrap 3 中已被弃用，并且似乎并没有真正实现被任何东西取代.有谁知道 Bootstrap 3 Tab 插件中是否可以进行适当的左右选项卡渲染?
左、右和下方选项卡已从 Bootstrap 3 中删除，但您可以添加自定义 CSS 来实现此目的..
.tabs-below >.导航标签，.tabs-right >.导航标签，.tabs-left >.nav-tabs {边框底部:0；}.tab-content >.tab 窗格，.药丸内容>.pill 窗格{显示:无；}.tab-content >.积极的，.药丸内容>.积极的 {显示:块；}.tabs-below >.nav-tabs {边框顶部:1px 实心 #ddd；}.tabs-below >.nav-tabs >李{边距顶部:-1px；底边距:0；}.tabs-below >.nav-tabs >立>一种 {-webkit-border-radius: 0 0 4px 4px;-moz-border-radius: 0 0 4px 4px;边界半径:0 0 4px 4px；}.tabs-below >.nav-tabs >立>答:悬停，.tabs-below >.nav-tabs >立>一个:焦点{边框顶部颜色:#ddd；边框底色:透明；}.tabs-below >.nav-tabs >.active >一种，.tabs-below >.nav-tabs >.active >答:悬停，.tabs-below >.nav-tabs >.active >一个:焦点{边框颜色:透明 #ddd #ddd #ddd;}.tabs-left >.nav-tabs >李，.tabs-right >.nav-tabs >李{浮动:无；}.tabs-left >.nav-tabs >立>一种，.tabs-right >.nav-tabs >立>一种 {最小宽度:74px；右边距:0；底边距:3px；}.tabs-left >.nav-tabs {向左飘浮;右边距:19px；右边框:1px 实心 #ddd；}.tabs-left >.nav-tabs >立>一种 {边距右:-1px；-webkit-border-radius: 4px 0 0 4px;-moz-border-radius: 4px 0 0 4px;边框半径:4px 0 0 4px；}.tabs-left >.nav-tabs >立>答:悬停，.tabs-left >.nav-tabs >立>一个:焦点{边框颜色:#eeeeee #dddddd #eeeeee #eeeeee;}.tabs-left >.nav-tabs .active >一种，.tabs-left >.nav-tabs .active >答:悬停，.tabs-left >.nav-tabs .active >一个:焦点{边框颜色:#ddd 透明 #ddd #ddd;*border-right-color: #ffffff;}.tabs-right >.nav-tabs {浮动:对；左边距:19px；左边框:1px 实心 #ddd；}.tabs-right >.nav-tabs >立>一种 {左边距:-1px；-webkit-border-radius: 0 4px 4px 0;-moz-border-radius: 0 4px 4px 0;边界半径:0 4px 4px 0;}.tabs-right >.nav-tabs >立>答:悬停，.tabs-right >.nav-tabs >立>一个:焦点{边框颜色:#eeeeee #eeeeee #eeeeee #dddddd;}.tabs-right >.nav-tabs .active >一种，.tabs-right >.nav-tabs .active >答:悬停，.tabs-right >.nav-tabs .active >一个:焦点{边框颜色:#ddd #ddd #ddd 透明；*border-left-color: #ffffff;}更新
如果您不需要选项卡的确切外观(在每个选项卡被激活时在左侧或右侧适当加边框)，您可以简单地使用 nav-stacked 和 Bootstrap col-* 将选项卡向左或向右浮动...
nav-stacked 演示:http://codeply.com/go/rv3Cvr0lZ4
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;
<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.
This was handled in Bootstrap 2.x using the tab-left and tab-right classes, 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?
Left, Right and Below tabs were removed from Bootstrap 3, but you can add custom CSS to achieve this..
.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
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 demo: 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>
这篇关于Bootstrap 3 中的堆叠标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
