我在使用引导程序时遇到了问题。
我有一行包含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/