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

Question

这个问题有点类似于这一个，但我想知道是否有一个纯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>

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