Bootstrap：如何堆叠不同高度的div？
这个问题有点类似于这个 ，但是我想知道是否有一个与Bootstrap兼容的纯CSS解决scheme。
基本上，我有以下布局：
这是该网页的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> 问题是，正如你所看到的那样，Bootstrap的行系统在这里有点不方便。 我希望这些类别以最佳方式堆叠。 所以我的问题是：我怎么能用CSS做到这一点？ 砖石插件似乎很好，但我想保留它的计划B.
谢谢！
看看这些例子..
砌体式布局只有CSS
应用到你的引导list-group它看起来像这样
但是，您需要从标记中删除Bootstrap col-*类，因为它们使用浮动混乱了砌体布局。 使用*-column-width属性来更改面板的宽度。 所以，使用纯CSS是可能的，但是不能跨浏览器兼容，所以你仍然可能想使用Masonry插件作为后备。
如果您只是希望确保列包装每x列，请使用Bootstrap 响应式重置 ，或使用媒体查询的clearfix解决scheme，例如： http : //www.codeply.com/go/jXuoGHHker
更多关于解决不同高度的问题
更新引导4将包括一个CSS列布局石工选项 。
最好使用.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>
请参阅参考资料：在引导程序3上
你可以试试这个
<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%;}
我的解决scheme是基于@ ashish-kumar的回答
我把物品塑造成一个盒子，如下所示
<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>
诀窍是在每个“.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>
这可以使用jQuery来实现
$('<div class="box-wrap clearfix"></div>').insertAfter('.box');
现在，使用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; } }
请注意，在执行“重新设置新行”时，规则是.row.the-list .box-wrap ，并在开头处具有“.row”，以便此规则位于 display: block; 之前 display: block; 之前的规则。
一个生动的例子，请参阅所有英国逃生室的网站
