css - Bootstrap：如何堆叠不同高度的div？

Question

这个问题和这个问题有点相似，但是我想知道有没有兼容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 做到这一点？砌体插件看起来很棒，但我想保留它用于 B 计划。

谢谢！

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

请参阅参考资料：在 Bootstrap 3 上

Answer 2

看看这些例子..

仅使用 CSS 的砌体式布局

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

http://bootply.com/85737

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

如果您只是想确保列包含每x列，请使用 Bootstrap响应式重置，或带有媒体查询的 clearfix 解决方案，如下所示：http: //www.codeply.com/go/jXuoGHHker

更多关于解决不同高度问题

更新Bootstrap 4 将包括一个CSS 列布局砌体选项。

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

Answer 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，我在每个 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;规则之前。

一个活生生的例子，请参阅英国 All Escape Rooms的网站