[英]How do I get bootstrap tabs-left to work in bootstrap 3.3.x
I noticed that nav-tabs left doesn't work in Bootstrap 3.3.0,3.3.2 and was wandering if anyone knew how to re-enable the style. 我注意到左边的nav-tabs在Bootstrap 3.3.0,3.3.2中不起作用,如果有人知道如何重新启用该样式,它会在徘徊。 Tabs should run up and down, with content chosen on the right. 标签应上下运行,并在右侧选择内容。
Working bootstrap2.3.2 BIN: Working bootstrap2.3.2 BIN:
http://jsbin.com/vimekuloqo/4/edit http://jsbin.com/vimekuloqo/4/edit
Here's the not working 3.3.0 link: 这是无法正常工作的3.3.0链接:
http://jsbin.com/wituxucuja/1/edit http://jsbin.com/wituxucuja/1/edit
Relevant code (directly from http://getbootstrap.com/2.3.2/components.html#navs ) 相关代码(直接来自http://getbootstrap.com/2.3.2/components.html#navs )
<ul class="nav nav-tabs">
<li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
<li class=""><a href="#lB" data-toggle="tab">Section 2</a></li>
<li class=""><a href="#lC" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="lA">
<p>I'm in Section A.</p>
</div>
<div class="tab-pane" id="lB">
<p>Howdy, I'm in Section B.</p>
</div>
<div class="tab-pane" id="lC">
<p>What up girl, this is Section C.</p>
</div>
</div>
</div>
... ...
<script language=javascript>
$('#myTab a').click(function (e) {
if($(this).parent('li').hasClass('active')){
$( $(this).attr('href') ).hide();
}
else {
e.preventDefault();
$(this).tab('show');
}
});
</script>
This article provides a full answer with code and demo down the page a ways: http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/ 本文提供了完整的代码答案,并通过以下方式演示了该页面: http : //tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/
The simple answer is you need to add .nav-stacked to the <ul>
and then use the normal row/column system to lay it out. 简单的答案是,您需要将.nav-stacked添加到<ul>
,然后使用常规的行/列系统进行布局。 BS3 doesn't natively support floating the tabs around on its own like BS2 did. BS3不像BS2那样本身就支持浮动选项卡。
http://jsbin.com/kobegaguwa/1/edit http://jsbin.com/kobegaguwa/1/edit
Note that for jsbin preview you need to use xs columns or it will stack everything in 1 column responsively. 请注意,对于jsbin预览,您需要使用xs列,否则它将以响应方式将所有内容堆叠在1列中。
The default styling doesn't work very well for tabs, but works ok for pills. 默认样式不适用于标签,但可以用于药丸。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.