Bootstrap Grid System 新行不好看

Posted 2023-03-06

【中文标题】Bootstrap Grid System 新行不好看

【英文标题】：Bootstrap Grid System new line does not look nice

【发布时间】：2016-12-08 10:12:22

【问题描述】：

最近，我开始在我的网站上制作一个管理页面来编辑多个小表格（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？

这种变体也是可以接受的，但不是使用表格而是响应式布局（EDIT：这是通过使用@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>

【参考方案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

【参考方案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;

然后在子元素或网格元素上做同样的事情，你可以让它们都伸展以填充那个丑陋的空白空间，从而实现另一个网格布局而不会......不雅？

---

网格：Javascript 方式

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

---

砌体：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>

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

【参考方案3】：

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

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

【讨论】：

如果都在一行，可以尝试设置单元的最小高度：<div class="col-xs-12 col-sm-4 col-md-4 block"> .block min-height: 630px !important;

我把所有元素都放在一个容器行中；）

【参考方案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>

【讨论】：

没有做任何事情：/

@FlorianMüller 我一直都在使用它，尤其是对于具有 class="col-xs-12 col-sm-6 col-md-4" 以正确设置 clearfix 的布局。也是官方的Bootstrap方法Bootstrap responsive resets。