Bootstrap Grid System new line does not look nice

Question

最近，我开始在自己的网站上创建一个管理页面，以编辑多个小表（1-5个条目）。它们全部显示在一页上，并且表嵌套在div中，如下所示：

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 1-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 2-->
    </div>
    ...
</div>

更新

我只是随机发现了一种实现第一个所需变体的可能性：您只需为每列定义一个div并将所有元素（在本例中为表格）放在其中，这样它们就不会相互依赖。

像这样：

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 1-->
        <!--table 4-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 2-->
        <!--table 5-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 3-->
        <!--table 6-->
    </div>
</div>

Answer 1

这是由于柱高的变化。您需要每3列重置一次“ clearfix”以强制进行换行。一种方法是使用Bootstrap推荐的方法，或者在这种特定情况下，您可以使用像这样的简单CSS clearfix。

@media (min-width:992px) {
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
}

对于其他具有不同col宽度和网格层的“ clearfix”方案，有一个通用的CSS only clearfix解决方案，它将适合更多方案（不受支持）。