CSS Bootstrap：如何堆叠不同高度的div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19196082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: how to stack divs of different heights?
提问by Moeri
This question is a bit similar to this one, but I want to know if there is a pure CSS solution that is compatible with Bootstrap.
这个问题有点类似于这一个，但我想知道是否有一个纯CSS的解决方案，以引导兼容。
Basically, I have the following layout:
基本上，我有以下布局：
This is the HTML of that page:
这是该页面的 HTML：
<div class="menu row">
<div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
</div>
<div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
</div>
<div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
</div>
<div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
</div>
<div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge"> 0.00</span></a>
</div>
</div>
The problem is, as you can see, that the row system of Bootstrap is a bit inconvenient here. I want these categories to stack in the most optimal way. So my question is: how can I do that with CSS? The masonry plugin seems excellent but I would like to keep it for plan B.
问题是，正如你所看到的，Bootstrap 的行系统在这里有点不方便。我希望这些类别以最佳方式堆叠。所以我的问题是：我怎样才能用 CSS 做到这一点？砌体插件看起来很棒，但我想为 B 计划保留它。
Thanks!
谢谢！
回答by Ashish Kumar
Better to use .visible-sm,.visible-md, .visible-lg with clearfix classes. That helps to clear the floats according to screen sizes also.
最好将 .visible-sm、.visible-md、.visible-lg 与 clearfix 类一起使用。这也有助于根据屏幕尺寸清除浮动。
<!-- This will clear the float in Middle and Large Size screens only -->
<div class="clearfix visible-md visible-lg"></div>
<!-- This will clear the float in Small Size screens only -->
<div class="clearfix visible-sm"></div>
回答by Zim
Take a look at these examples..
看看这些例子..
Masonry-style Layout ONLY with CSS
Applied to your Bootstrap list-groupit would look something like this..
应用到你的 Bootstraplist-group它看起来像这样..
However, you need to remove the Bootstrap col-*classes from your markup since they use floats a mess up the masonry layout. Use the *-column-widthproperty to change the width of the panels. So, it's possible with pure CSS, but not cross-browser compatible so you still may want to use the Masonry pluginas a fallback.
但是，您需要col-*从标记中删除 Bootstrap类，因为它们使用浮动会弄乱砖石布局。使用该*-column-width属性更改面板的宽度。因此，使用纯 CSS 是可能的，但不能跨浏览器兼容，因此您仍然可能希望使用Masonry 插件作为后备。
If you're simply looking to ensure the columns wrap every xcolumns, use Bootstrap responsive resets, or a clearfix solution with media queries like this: http://www.codeply.com/go/jXuoGHHker
如果您只是想确保列包含每x列，请使用 Bootstrap响应式重置，或使用具有如下媒体查询的 clearfix 解决方案：http: //www.codeply.com/go/jXuoGHHker
More on solving the different heights issue
UPDATEBootstrap 4 will include a CSS column layout masonry option.
更新Bootstrap 4 将包括一个CSS 列布局砌体选项。
回答by ngakak
You can try this
你可以试试这个
<div class="grid-container">
<div class="sub-grid">....</div>
<div class="sub-grid">....</div>
<div class="sub-grid">....</div>
</div>
.grid-container{
-moz-column-count:2;
-moz-column-gap:10px;
-webkit-column-count:2;
-webkit-column-gap:10px;
column-count: 2;
column-gap: 10px;
}
.sub-grid{display: inline-block;width: 100%;}
回答by Arik
My solution is based on the answer of @ashish-kumar
我的解决方案基于@ashish-kumar 的回答
I have items shaped as a box, as follows
我有一个盒子形状的物品，如下
<div class="row the-list">
<div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
<div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
<div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
</div>
The trick is to add a clearfix div, after every ".box" item, like so
诀窍是在每个“.box”项目之后添加一个 clearfix div，就像这样
<div class="row the-list">
<div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
<div class="box-wrap clearfix"></div>
<div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
<div class="box-wrap clearfix"></div>
<div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
<div class="box-wrap clearfix"></div>
</div>
This can be achieved using jQuery
这可以使用jQuery来实现
$('<div class="box-wrap clearfix"></div>').insertAfter('.box');
Now, using css, I've made the ".clearfix" of after every 2nd\3rd\4th box (depending on the current screen size), be shown.
现在，使用 css，我在每个 2nd\3rd\4th 框（取决于当前屏幕尺寸）之后显示了“.clearfix”。
/* hide all new lines by default */
.the-list .box-wrap {
display: none;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
/* reset new lines */
.row.the-list .box-wrap {
display: none;
}
/* new line every 2nd box */
.the-list .box-wrap:nth-child(4n) {
display: block;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
/* reset new lines */
.row.the-list .box-wrap {
display: none;
}
/* new line every 3rd box */
.the-list .box-wrap:nth-child(6n) {
display: block;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
/* reset new lines */
.row.the-list .box-wrap {
display: none;
}
/* new line every 4th box */
.the-list .box-wrap:nth-child(8n) {
display: block;
}
}
Notice that when doing the "reset new lines", the rule is .row.the-list .box-wrapand has the ".row" at the beginning, so that this rule will precedethe display: block;of the rules before it.
请注意，在执行“重置新行”时，规则.row.the-list .box-wrap以“.row”开头，因此该规则将在其之前display: block;的规则之前。
A live example, see All Escape Rooms UK's website
一个活生生的例子，参见英国所有密室逃脱网站
