html - 具有不同高度列的 Bootstrap 行

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 的下一行放在前第三行中最长的元素下。因此，每一行元素都完美对齐干净 - 虽然这很棒我希望每个元素都直接落在最后一个元素下面(“Masonry”布局)

Answer 1

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

Bootstrap 5(2021 年更新)

Bootstrap columns 仍然使用 flexbox，但是 card-columns 以前用于创建类似 Masonry 的布局 have been removed 。对于 Bootstrap 5，推荐的方法是使用 Masonry JS 插件: Bootstrap 5 Masonry Example

Bootstrap 4(2018 年更新)

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

Bootstrap 3(原始答案 -- flexbox 之前)

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

注意:以下选项适用于在单个 .row 中超过 12 个 col 单元的 column wrapping scenarios。对于不理解为什么连续超过 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 - 取消 float 列，改为使用内联 block ..**

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

Demo of inline block fix

---

4 - CSS3 列方法(Masonry/Pinterest 类解决方案)..

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

Bootstrap 3 multi-columns Demo

5 - Masonry JavaScript/jQuery 方法

最后，您可能想要使用一个插件，例如 Isotope/Masonry:

Bootstrap Masonry Demo
Masonry Demo 2

---

More on Bootstrap Variable Height Columns

---