如何调整Bootstrap列分组？

Question

我有一列内容，我试图将它们一个一个地叠加在一起，而这是因为浮动而发生的，所以我已经包含了一个clearfix，但它不起作用。< / p>

代码示例：

<div class="row">
    <div class="col-md-6 col-sm-6">
        <div class="col-md-12 col-sm-12 text-center">Title</div>

        <div class="col-md-6 col-sm-6">sub-title</div>
        <div class="col-md-6 col-sm-6">Information</div>
    </div>

   <div class="col-md-6 col-sm-6">
        <div class="col-md-12 col-sm-12 text-center">Title</div>

        <div class="col-md-6 col-sm-6">sub-title</div>
        <div class="col-md-6 col-sm-6">Information</div>

        <div class="col-md-6 col-sm-6">sub-title</div>
        <div class="col-md-6 col-sm-6">Information</div>
    </div>

    <div class="clearfix"></div>

    <div class="col-md-6 col-sm-6">
        <div class="col-md-12 col-sm-12 text-center">Title</div>

        <div class="col-md-6 col-sm-6">sub-title</div>
        <div class="col-md-6 col-sm-6">Information</div>
    </div>

    <div class="col-md-6 col-sm-6">
        <div class="col-md-12 col-sm-12 text-center">Title</div>

        <div class="col-md-6 col-sm-6">sub-title</div>
        <div class="col-md-6 col-sm-6">Information</div>

        <div class="col-md-6 col-sm-6">sub-title</div>
        <div class="col-md-6 col-sm-6">Information</div>
    </div>
</div>

这是我所追求的图像示例：

Answer 1

当您对列进行嵌套时，您仍然需要将rows与内部列结构一起使用，就像在任何其他时间一样。

此外，此column structure类型post也是多余的。如果您使用col-md-6 col-sm-6或col-md-6 col-sm-6，您会看到相同的结果;两者都将以768px崩溃，这意味着col-sm-6不会被使用。根据您希望列折叠的视口宽度，使用其中一个或另一个。有关其他信息，请参阅此{{3}}。

参见示例。

＆＃13;

＆＃13;

col-md-6

＆＃13;

＆＃13;

＆＃13;