将 div 列添加到 bootstrap 标签内容中

Question

我使用 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（检查第一个选项卡并查看问题，第二个选项卡有效）

Answer 1

问题是您在“主页”选项卡内容中创建了一个没有行的 bootstrap 列。 bootstrap 中的列是浮动的，您需要手动清除浮动或将其包装成 .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>

将 div 列添加到 bootstrap 标签内容中

add div columns into bootstrap tabs content

html

css

jquery

twitter-bootstrap

bootstrap-tabs