101

我目前有类似的东西：

<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放在前第三行中最长元素的下方。因此，每一行项目都完美对齐 - 虽然这太棒了，但我希望每个项目都直接落在最后一个元素之下（“砌体”布局)

4

3 回答 3

188

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

引导程序 5（2021 年更新）

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

引导程序 4（2018 年更新）

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

Bootstrap 3（原始答案——预弹性盒）

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

Bootstrap 不均匀包装列

注意：以下选项适用于单个列中包含超过 12 个列单位的列换行方案。对于不理解为什么会有超过 12 个列连续的读者，或者认为解决方案是“使用单独的行”的读者应该先阅读这篇文章.row

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

1 - 像这样的“clearfix”方法（由 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 演示（单层）

Clearfix 演示（响应层） - 例如。col-sm-6 col-md-4 col-lg-3

还有一个CSS-only 变体'clearfix'
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 等高演示

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

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

内联块修复演示

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

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

Bootstrap 3 多列演示

5 - 砌体 JavaScript/jQuery 方法

最后，您可能需要使用 Isotope/Masonry 等插件： 在此处输入图像描述

Bootstrap砌体演示
砌体演示2

更多关于 Bootstrap 可变高度列

于 2014-03-10T21:01:43.100 回答
11

出于某种原因，这对我有用，没有 .display-flex 类

.row {
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}
于 2017-11-08T18:41:52.127 回答
-1

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

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

于 2018-11-20T15:30:41.277 回答