Bootstrap行与不同高度的列 [英] Bootstrap row with columns of different height

问题描述

 < div class =row> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< / div> 
  

现在假设 content 不同的高度，所有的宽度 - 我怎么能保持相同的网格布局，但所有的盒子排列在对方之下，而不是完美的线条。

目前，TWBS会在下一行 col-md-4 下放置前一行第三行的最长元素， - 虽然这很棒，但我希望每个项目直接落在最后一个元素（砌体布局）下面。

解决方案

受欢迎的Bootstrap问题，所以我已经更新并扩展了Bootstrap 3和Bootstrap 4的答案...... Bootstrap 3

注意：以下选项适用于

 < div class =row> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< div class =clearfix>< / div> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< div class =clearfix>< / div> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< div class =col-md-4>内容< / div> 
< / div> 
  

$ b

---

3 - 取消浮动列使用内联块代替。

同样，高度问题仅出现在列浮动的情况下。另一种选择是将列设置为 display：inline-block 和 float：none 。这也为垂直对齐提供了更大的灵活性。但是，使用此解决方案时，必须在列之间没有HTML空格，否则

Bootstrap Masonry演示

---

有关Bootstrap变量高度栏的更多信息

所有列在 Bootstrap 4 中的高度相同，因为它使用flexbox by默认，所以高度问题不是问题。此外，Bootstrap 4包含这种类型的多列解决方案：
Bootstrap 4砌体卡片演示。

I currently have something like:

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

Now assuming that, content was boxes of different height, with all the same width - how could I keep the same "grid based layout" and yet have all the boxes line up under each other, instead of in perfect lines.

Currently TWBS will place the next line of col-md-4 under the longest element in the previous third row., thus each row of items is perfectly aligned an clean - while this is awesome I want each item to fall directly under the last element ("Masonry" layout)

解决方案

This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3 and Bootstrap 4...

The Bootstrap 3 "height problem" occurs because the columns use float:left. When a column is "floated" it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights, the correct behavior is to stack them to the closest side.

Note: The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row. For readers that don't understand why there would ever be more than 12 cols in a row, or think the solution is to "use separate rows" should read this first

---

There are a few ways to fix this.. (updated for 2018)

1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number of columns...

<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) - eg. col-sm-6 col-md-4 col-lg-3

There is also a CSS-only variation of the 'clearfix'
CSS-only clearfix with tables

---

2 - Make the columns the same height (using flexbox):

Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in 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 - Un-float the columns an use inline-block instead..

Again, the height problem only occurs because the columns are floated. Another option is to set the columns to display:inline-block and float:none. This also provides more flexibility for vertical-alignment. However, with this solution there must be no HTML whitespace between columns, otherwise the inline-block elements have additional space and will wrap prematurely.

Demo of inline block fix

---

4 - CSS3 columns approach (Masonry/Pinterest like solution)..

This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right. Bootstrap 4 includes this type of solution: Bootstrap 4 Masonry cards Demo.

Bootstrap 3 multi-columns Demo

5 - Masonry JavaScript/jQuery approach

Finally, you may want to use a plugin such as Isotope/Masonry:

Bootstrap Masonry Demo
Masonry Demo 2

---

More on Bootstrap Variable Height Columns

---

Update 2018
All columns are equal height in Bootstrap 4 because it uses flexbox by default, so the "height issue" is not a problem. Additionally, Bootstrap 4 includes this type of multi-columns solution: Bootstrap 4 Masonry cards Demo.

这篇关于Bootstrap行与不同高度的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！