Question

我的bootstrap有问题。

我有一行包含4个元素，这些元素在大型浏览器中排成4列25％。当浏览器是Boostrap 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组合技巧...将它放在第二列之后，它仅clearfix在非lg设备上，但保持原样{{1像这样：

lg

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

Answer 2

每行会有两列，因为你告诉它用col-xs-6做到这一点。如果您希望它始终是每行四列的布局，您希望这样做：

<div class="row">
    <div class="col-xs-3 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-xs-3 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-xs-3 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-xs-3 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>

Bootstrap行转到两列

2 个答案: