Bootstrap：如何堆叠不同高度的div？答案

【问题标题】：Bootstrap: how to stack divs of different heights?Bootstrap：如何堆叠不同高度的div？
【发布时间】：2013-10-12 07:53:46
【问题描述】：

这个问题和this one有点类似，但是我想知道有没有兼容Bootstrap的纯CSS方案。

基本上，我有以下布局：

这是该页面的 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 做到这一点？ masonry 插件看起来很棒，但我想保留它作为 B 计划。

谢谢！

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

最好将 .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>

See Reference: on Bootstrap 3

【讨论】：

很好的解决方案！干净，乐于助人！
很高兴它对您有所帮助。干杯！！
这确实有助于行包裹每个 X，但不会像“砌体”样式布局那样消除间距。此外，它还有更多标记：codeply.com/go/3gS13OJmea

【解决方案2】：

看看这些例子..

Masonry-style Layout ONLY with CSS

应用于您的引导程序list-group，它看起来像这样..

http://bootply.com/85737

但是，您需要从标记中删除 Bootstrap col-* 类，因为它们使用浮动会弄乱砌体布局。使用*-column-width 属性更改面板的宽度。因此，可以使用纯 CSS，但不兼容跨浏览器，因此您仍可能希望使用 Masonry plugin 作为后备。

如果您只是希望确保列包含每个 x 列，请使用 Bootstrap responsive resets，或带有媒体查询的 clearfix 解决方案，例如：http://www.codeply.com/go/jXuoGHHker

More on solving the different heights issue

更新 Bootstrap 4 将包含一个CSS column layout masonry option。

【讨论】：

这太棒了！我处于只需要支持现代浏览器的奢侈位置，所以我会选择列 css 解决方案。感谢您写出来，这对我来说是新的。
@IanSteffy 您应该删除该评论。该链接已经 OBE 很长时间了

【解决方案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%;}

演示http://teknosains.com/

【讨论】：

【解决方案4】：

我的解决方案是基于@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，我在每个第 2\3\4 个框（取决于当前屏幕尺寸）之后制作了“.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”开头，因此这条规则will precede是前面规则的display: block;。

一个活生生的例子，见All Escape Rooms UK的网站

【讨论】：