更新

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被包装到第三行：

我实际想要实现的目标（如果可能的话，使用boostrap网格系统）是第6个表格没有被包裹到第三行但只是稍微低一点，就像这样：

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

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

感谢您的建议！

更新

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

类似的东西：

<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

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

<小时/> 网格：Rambo方式
如果你确定你的桌子不会有超过五个记录，你可以试着给它们一个合适的最小宽度。当然不是最优雅的东西。 网格：FlexBox方式
从caniuse可以看出，FlexBox的浏览器支持现在肯定不是很糟糕。通过在容器元素

上设置它

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

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

然后在孩子或网格元素上做同样的事情，你可以做到这一点，他们都伸展到填补那个丑陋的白色空间，从而实现另一个网格布局而不是......不优雅？

<小时/> 网格：Javascript方式
在这种情况下实现网格布局的另一种方法显然是使用JavaScript来使它们都具有与网格中最高元素相同的高度。更快的方法是使用jQuery plugin，这也允许您仅在需要时按行给它们相同的大小，这似乎适合您的情况。无论如何，你必须使用jQuery，因为Bootstrap。 砌体：Javascript方式
您指定的具有不同尺寸的非网格系统称为砌体布局。这也是一个有用的library，虽然我不认为如果你只需要在该区域使用这样的布局，它就值得。这也使你的标记非常脏，而且我不知道它是否与Bootstrap相当。 砌体：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 2

这是由于柱高不同。您需要每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

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

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

See my more complete answer on this issue

Answer 3

一个容器中的所有列＆gt;行？

<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 4

您可以使用

<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>

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

更新

4 个答案: