我在使用引导程序时遇到了问题。

我有一行包含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>

最佳答案

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

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


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

关于html - 进入两列的引导行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24761245/

10-12 12:37
查看更多