Question

我正在尝试使用自举网格系统来安排8个相等宽度和类似但不同高度的盒子。我希望布局能够做到2x2x2x2,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 -->

Answer 1

您可以使用flexbox获取所需的布局。它不是砖石风格，但它修复了当元素不能一直浮动到页面左侧时所获得的空白区域。使用flexbox，您可以从注释中链接的图像中获取第一个案例，因此下一行中的元素将从上一行中的最高元素开始。

只需将div中的所有列包裹起来（如果你只是将flexbox放在＆＃34;容器＆＃34; div或＆＃34; row＆＃34;它可能会有效;但我不确定）：

HTML：

    Array
(
    [0] => Array
        (
            [style_id] => 308
            [wrap] => Array
                (
                    [285] => 285
                )

            [cover] => Array
                (
                    [307] => 307
                )

            [miluna_products] => a:2:{s:6:"322%14";s:30:"a:1:{i:0;s:12:"100_2102.jpg";}";s:7:"323%268";s:35:"a:1:{i:0;s:17:"1449004825736.gif";}";}
            [total_price] => 282
        )
    [1] => Array
        (
            [style_id] => 309
            [wrap] => Array
                (
                    [275] => 275
                )

            [cover] => Array
                (
                    [377] => 377
                )

            [miluna_products] => a:2:{s:6:"322%14";s:30:"a:1:{i:0;s:12:"100_2102.jpg";}";s:7:"323%268";s:35:"a:1:{i:0;s:17:"1449004825736.gif";}";}
            [total_price] => 282
        )

)

的CSS：

<div class="container">
    <div class="row">
        <div class="flex-wrapper">
            <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 -->

            ....etc....

        </div>
    </div>
</div>

除了IE10及以下版本之外，它适用于所有浏览器，但这些浏览器还有一个填充，所以你应该好好去。

编辑：

你可以使用在另一个答案的评论中发布的解决方案来获得砌体样式（bootsnipp.com/snippets/OeVbl），如果你想避免使用ems，你可以使用列数来操纵数量列。如果您希望在不同分辨率上使用不同数量的列，则只需在媒体查询中添加不同的列数。

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

Bootstrap网格有8个不同高度的div

1 个答案: