我目前有类似的东西:
<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”布局)
最佳答案
这是一个流行的 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 (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;
}
**3 - 取消 float 列,改为使用内联 block ..**
同样,高度问题只是因为列是 float 的。另一种选择是将列设置为 display:inline-block
和 float:none
。这也为垂直对齐提供了更大的灵 active 。但是,对于此解决方案,必须列之间没有 HTML 空格,否则 inline-block elements have additional space 和 将过早换行。
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
关于html - 具有不同高度列的 Bootstrap 行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45638345/