css - Bootstrap Grid System 新行看起来不太好

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>

我用六个表做了这个，如果它们有相同数量的记录(一个表是一个黑色 block )，它看起来是这样的:

现在第一个表有更多记录时，第一个表更大，因此最后一个 div 被包装到第三行:

我真正想要实现的(如果可能的话，使用 boostrap 网格系统)是第 6 个表不会换行到第三行，而是放得稍微低一点，就像这样:

这有可能以某种方式使用或不使用 boostrap 吗？

这种变体也是可以接受的，但不是使用表格而是响应式布局(编辑:这是通过使用@Skelly 的回答实现的):

多谢指教!

---

更新

我只是随机发现了一种实现第一个所需变体的可能性:您只需为每列定义一个 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”以强制均匀换行。一种方法是使用 approach recommended by Bootstrap ，或者在这种特定情况下，您可以使用像这样的简单 CSS clearfix..

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

演示:http://codeply.com/go/mONLiFj30T

对于其他具有不同列宽度和网格层的“clearfix”场景，有一个 universal CSS only clearfix solution 将适合更多场景(不支持)。

另一个解决方案是 CSS 列，用于“砌体”样式布局，但它不使用 Bootstrap 网格: http://www.bootply.com/mYkzRDvbEq

See my more complete answer on this issue