html - 进入两列的 Bootstrap 行

Question

我遇到了引导问题。

我有一行有 4 个元素，在大型浏览器中，一行有 4 个 25% 的列。 当浏览器是 Bootstrap XS o SM 时，我想使用 2 行 2 列的结构，是否可以不破坏结构？

<div class="row col-md-12">
    <div class="col-md-3 col-xs-6 padding-h-sm line-height-sm">
        <div class="icon"><img src="images/mondiali-pallavolo/comunicare.png"></div>
        <div>Comunicare news e aggiornamenti sul mondiale femminile.</div>
    </div>
    <div class="col-md-3 col-xs-6 padding-h-sm line-height-sm">
        <div class="icon"><img src="images/mondiali-pallavolo/responsive.png"></div>
        <div>Rendere fruibili i contenuti in qualsiasi momento.</div>
    </div>
    <div class="col-md-3 col-xs-6 padding-h-sm line-height-sm">
        <div class="icon"><img src="images/mondiali-pallavolo/gestione.png"></div>
        <div>Semplificare la creazione e la gestione dei contenuti.</div>
    </div>
    <div class="col-md-3 col-xs-6 padding-h-sm line-height-sm">
        <div class="icon"><img src="images/mondiali-pallavolo/sponsor.png"></div>
        <div>Aumentare la visibilità degli sponsor così da sostenere l'investimento.</div>
    </div>
</div>

Answer 1

在这种情况下，是文本的可变长度导致了这种情况，但可变高度的图像也会产生同样的效果。最好的解决方法是 hidden-* clearfix 组合技巧...将它放在第二列之后，它将在非 lg 上 clearfix仅设备，但在 lg 上保持原样，如下所示:

<div class="hidden-lg clearfix"></div>

示例:http://www.bootply.com/emnE5Yaoil