2017-06-14 76 views
0

我有1行4列。在額外的小屏幕中,我想將它顯示在兩行中。對於其他尺寸可以保持1排。Bootstrap顯示大屏幕上4列,2上額外小

這就是我想:

<div class="row"> 
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-4"> 
     1 
    </div> 
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6"> 
     2 
    </div> 
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-4"> 
     3 
    </div> 
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6"> 
     4 
    </div> 
</div> 

我有問題時,纔會有很長的文字在小區1:

我想要的結果是這樣的:

enter image description here

但是,當我有一個長文本,我得到以下內容:

enter image description here

而且我想獲得如下:

enter image description here

是否有可能不會產生兩行?舊的佈局是爲了大屏幕,我必須爲了移動而做,而不是改變舊的佈局。

回答

0

儘量把所有的 'xs' CSS兩列,工作對我來說:

<div class="row"> 
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6"> 
     1 
    </div> 
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6"> 
     2 
    </div> 
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6"> 
     3 
    </div> 
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6"> 
     4 
    </div> 
</div>