Twitter bootstrap 3 具有8个不同高度的分区的引导栅格

我尝试使用引导网格系统来安排8个相同宽度和相似但不同高度的盒子。我想让布局做2x2x2，3x3x2，4x4-响应屏幕大小

我可以做响应式布局，但我的问题是让它们正确格式化，这样在某些布局中不会在某些框上方留下空白。我尝试过clearfix的不同组合，但无法使其工作。可能吗？我想是吧！下面是它的样子：

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... .... ..... ....</p>
        </div> <!-- /.block 1 -->

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... .... ..... ....</p>
        </div> <!-- /.block 2 -->

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... .... ..... .... .... ..... ......</p>
        </div> <!-- /.block 3 -->

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... .... ..... ....</p>
        </div> <!-- /.block 4 -->

        <div class="clearfix visible-md-block visible-lg-block"></div>

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... </p>
        </div> <!-- /.block5 -->

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... .... ..... ....</p>
        </div> <!-- /.block 6 -->

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... .... ..... .... .... .... ....</p>
        </div> <!-- /.block 7 -->

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... ....  ....</p>
        </div> <!-- /.block 8 -->

    </div><!-- /.row -->
</div><!-- /.container -->

---

您可以使用flexbox获得所需的布局。它不是砌体风格，但是它修复了当元素不能漂浮到页面左侧时所得到的空白空间。使用flexbox，您可以从您在注释中链接的图像中获得第一个大小写，因此下一行中的元素将从上一行中最高元素的下方开始

只需像这样将所有列包装在一个div中，如果您只是将flexbox放在container div或row上，它可能会工作，但我不确定：

html:

它适用于除IE10及以下版本之外的所有浏览器，但这些浏览器也有一个polyfill，所以您应该可以使用它

编辑：

您可以使用在另一个答案的评论中发布的解决方案来获得砖石风格的bootsnipp.com/snippets/OeVbl，如果您想要避免ems，您可以使用列计数来操纵列数。如果您想要不同分辨率的不同列数，只需在媒体查询中输入不同的列数即可

.row {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;

    -moz-column-gap: 15px;
    -webkit-column-gap:15px;
}

---

我猜问题是，如果下一行的第一个div无法一直向左浮动，那么在高div下面就会出现空格，因为它会卡在这个高div上。你可以使用砖石结构来排列divs pinterest样式，或者将所有div放在一行中，在一个具有类行的div中，以及另一个具有row类的div中第二行的所有div。类行清除浮动并转到我假设的另一行。是的，问题如下所述。我在别的地方用过类似于砖石的东西。那么，没有它，这项安排就不可能发挥作用吗？我与clearfix的各种化身关系密切，所以我认为它一定是？是的！谢谢@Mario！！那太好了！IE10的pollyfill是什么？这是polyfill-github.com/jonathantneal/flexibility flexibility.js比massy.js文件大，我想看看是否可以避免更多的js，但这是一个很好的解决方案。我确实尝试过在bootsnipp.com/snippets/OeVbl上添加一个媒体查询：@media all和max width:600px和min width:0px{.row{-webkit column count:2！important；；-moz column count:2！important；；column count:2！important；；}但这不起作用，在较小的屏幕尺寸下仍显示1列。

.flex-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

.row {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;

    -moz-column-gap: 15px;
    -webkit-column-gap:15px;
}