具有不同高度列的引导行

Question

我目前有类似的东西：

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

现在假设，content 是不同高度的盒子，宽度都相同 - 我怎么能保持相同的“基于网格的布局”，但让所有盒子在彼此下方排列，而不是完美的线条.

目前 TWBS 会将下一行 col-md-4 放在前第三行中最长的元素下。因此，每一行项目都完美对齐 - 虽然这很棒，但我希望每个项目都直接落在最后一行之下元素（“砌体”布局）

Answer 1

这是一个流行的 Bootstrap 问题，所以我更新了并扩展了 Bootstrap 3、Bootstrap 4 和 Bootstrap 5 的答案...

引导程序 5（2021 年更新）

Bootstrap 列仍然使用 flexbox，但之前用于创建类似 Masonry 布局的卡片列 have been removed。对于 Bootstrap 5，推荐的方法是使用 Masonry JS 插件： Bootstrap 5 Masonry Example

引导程序 4（2018 年更新）

Bootstrap 4中所有列的高度都相同，因为它默认使用flexbox，所以“高度问题”不是问题。此外，Bootstrap 4 包括这种类型的多列解决方案： Bootstrap 4 Masonry cards Demo.

Bootstrap 3（原始答案--pre flexbox）

Bootstrap 3“height problem”出现是因为列使用了float:left。当一列“浮动”时，它会脱离文档的正常流程。它向左或向右移动，直到触及其包含框的边缘。因此，当您列高不均匀时，正确的做法是将它们堆叠到最近的一侧。

注意：以下选项适用于column wrapping scenarios，其中单个.row 中有超过12 个列单位。对于不明白为什么会有连续超过 12 列的读者，或者认为解决方案是“使用单独的行”should read this first

---

有几种方法可以解决此问题..（2018 年更新）

1 - 'clearfix' 方法 (recommended by Bootstrap) 像这样（需要每 X 列迭代一次）。这将强制每 X 列换行...

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Clearfix Demo (single tier)

Clearfix Demo (responsive tiers) - 例如。 col-sm-6 col-md-4 col-lg-3

还有一个“clearfix”的CSS-only variation
CSS-only clearfix with tables

---

**2 - 使列的高度相同（使用 flexbox）：**

由于问题是由高度的差异引起的，您可以使每行的列相等高度。 Flexbox 是执行此操作的最佳方式，Bootstrap 4 原生支持...

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Flexbox equal height Demo

---

**3 - 使用 inline-block 来取消浮动列..**

同样，高度问题只是因为列是浮动的。另一种选择是将列设置为display:inline-block 和float:none。这也为垂直对齐提供了更大的灵活性。但是，使用此解决方案时，必须列之间没有 HTML 空格，否则 inline-block elements have additional space 会过早换行。

Demo of inline block fix

---

4 - CSS3 列方法（类似砌体/Pinterest 的解决方案）..

这不是 Bootstrap 3 的原生方法，而是使用 CSS multi-columns 的另一种方法。这种方法的一个缺点是列顺序是从上到下而不是从左到右。 Bootstrap 4 包含此类 解决方案： Bootstrap 4 Masonry cards Demo.

Bootstrap 3 multi-columns Demo

5 - 砌体 JavaScript/jQuery 方法

最后，您可能需要使用 Isotope/Masonry 等插件：

Bootstrap Masonry Demo
Masonry Demo 2

---

More on Bootstrap Variable Height Columns

---

Answer 2

由于某种原因，这在没有 .display-flex 类的情况下对我有用

.row {
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

Answer 3

我为引导行创建了另一个扩展（也是反应式的）。你可以试试这样的：

.row.flexRow { display: flex; flex-wrap: wrap;}