Bootstrap 网格系统新行看起来不好看

Question

最近，我开始在我的网站上制作一个管理页面来编辑多个小 tables（1-5 个条目）。它们全部显示在一页上，table 嵌套在 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>

我用 6 个 table 做了这个，如果它们有相同数量的记录（一个 table 是一个黑色块），这就是它的样子：

现在第一个 table 有一个记录，第一个 table 更大，因此最后一个 div 换到第三行：

我真正想要实现的（如果可能的话，使用 boostrap 网格系统）是第 6 个 table 不会换行到第三行，而只是放低一点，就像这样：

这是否可能以某种方式使用或不使用 boostrap？

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

感谢指教！

更新

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

类似的东西：

<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

一个容器中的所有列 > 行？

<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 class="col-xs-12 col-sm-4 col-md-4">
    <!--table 6-->
</div
</div>

Answer 2

您可以通过多种方式解决此问题，具体取决于您要使用的内容和所需的浏览器支持。

网格：Rambo 方式
如果你确定你的表不会有超过五个记录，你可以尝试给他们一个适当的最小宽度。不过，这肯定不是最优雅的事情。

网格：FlexBox 方式
从caniuse可以看出，FlexBox现在的浏览器支持肯定不错。通过在容器元素上设置它

.container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

然后对网格的子元素或元素执行相同的操作，您可以使它们全部拉伸以填充丑陋的白色 space，从而实现另一个网格布局而不会...不优雅？

网格：Javascript 方式
在这种情况下实现网格布局的另一种方法显然是使用 JavaScript 来实现，因此它们都具有与网格中最高元素相同的高度。更快的方法是使用 jQuery plugin，它还允许您仅在需要时按行给它们相同的大小，这似乎适合您的情况。由于 Bootstrap 的缘故，您已经不得不使用 jQuery。

砌体：Javascript 方式
您指定的具有不同维度的非网格系统称为 Masonry Layout。也有一个有用的 library，尽管我认为如果您只需要在那个区域使用这样的布局是不值得的。它还使您的标记变得很脏，我不知道它是否适合 Bootstrap。

Masonry：Boostrap 方式
我不确定，因为我还没有尝试过，但你可以尝试这样组织内容：

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

如果您的表格也需要精确排列，这可能不是最佳解决方案。

Answer 3

你可以使用

<div class="clearfix visible-xs-block"></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 class="col-xs-12 col-sm-4 col-md-4">
        <!--table 3-->
    </div>
    <div class="clearfix visible-sm-block visible-md-block"></div>
    ...
</div>

Answer 4

这是由于列高不同所致。您需要每 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 列，用于 "masonry" 样式布局，但它不使用 Bootstrap 网格： http://www.bootply.com/mYkzRDvbEq

See my more complete answer on this issue

Bootstrap 网格系统新行看起来不好看

Bootstrap Grid System new line does not look nice

css

grid

grid-layout

twitter-bootstrap

twitter-bootstrap-3

更新