我使用 bootstrap 3 选项卡和样式使用 X-tabs plugin像这样:
HTML:
<div class='tabs-x tabs-below'>
<div id="myTabContent-2" class="tab-content">
<div class="tab-pane fade in active" id="home-2">
<div class="col-xs-4 col-md-2">
<p>The FALSE Tabs</p>
</div>
</div>
<div class="tab-pane fade" id="profile-2">
<p>The True TaBs WORKED</p>
</div>
</div>
<ul id="myTab-2" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home-2" role="tab" data-toggle="tab">Home</a>
</li>
<li><a href="#profile-2" role="tab-kv" data-toggle="tab">Profile</a>
</li>
</ul>
</div>
我像这样在标签内容中添加新的 div
:
<div class="col-xs-4 col-md-2"></div>
在操作中,此 div
显示在选项卡内容之外并且不起作用。我该如何解决这个问题?!
DEMO FIDDLE (检查第一个选项卡并查看问题,第二个选项卡有效)
最佳答案
问题是您创建的 Bootstrap 列在您的“主页”选项卡内容中没有一行。 bootstrap 中的列是 float 的,您需要手动清除 float 或将其包装在 .row
div 中。
您可以在此处查看 Bootstrap 网格模板示例:http://getbootstrap.com/examples/grid/
演示: http://jsfiddle.net/ce4xcyay/2/
<div class='tabs-x tabs-below'>
<div id="myTabContent-2" class="tab-content">
<div class="tab-pane fade in active" id="home-2">
<div class="row">
<div class="col-xs-4">
<p>The FALSE Tabs</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile-2">
<p>The True TaBs WORKED</p>
</div>
</div>
<ul id="myTab-2" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home-2" role="tab" data-toggle="tab">Home</a>
</li>
<li><a href="#profile-2" role="tab-kv" data-toggle="tab">Profile</a>
</li>
</ul>
</div>
关于jquery - 将 div 列添加到 Bootstrap 选项卡内容中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27912358/