Question

这个问题有点类似于this one，但我想知道是否有一个与Bootstrap兼容的纯CSS解决方案。

基本上，我有以下布局：

enter image description here

这是该页面的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>

See Reference: on Bootstrap 3

Answer 2

看看这些例子..

Masonry-style Layout ONLY with CSS

应用于你的Bootstrap 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。

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%;}

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

诀窍是在每个＆＃34; .box＆＃34;之后添加一个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，我已经制作了＆＃34; .clearfix＆＃34;在每个第2 \第3 \第4个框之后（取决于当前的屏幕尺寸），显示。

/* 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;
    }
}

请注意，在执行＆＃34;重置新行＆＃34;时，规则为.row.the-list .box-wrap并且具有＆＃34; .row＆＃34;在开头，这个规则will precede之前的display: block;规则。

一个实例，请参阅All Escape Rooms UK的网站

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

4 个答案: