3桌面上的列到平板上的2列

我正在使用引導程序3並試圖顯示多行，每行包含3個框。所有的盒子都是一樣的大小，所以它非常統一。你可以把它描繪成一個網格。在平板電腦上，我只需要兩列。3桌面上的列到平板上的2列

<div class="row"> 
    <div class="col-sm-6 col-md-4"> Uniform box of content here </div> 
    <div class="col-sm-6 col-md-4"> Uniform box of content here </div> 
    <div class="col-sm-6 col-md-4"> Uniform box of content here </div> 
</div> 

<div class="row"> 
    <div class="col-sm-6 col-md-4"> Uniform box of content here </div> 
    <div class="col-sm-6 col-md-4"> Uniform box of content here </div> 
    <div class="col-sm-6 col-md-4"> Uniform box of content here </div> 
</div>

現在，這在我的桌面上效果很好。在移動設備上，它們都會根據需要合併爲一個列。在平板電腦上，它們全都落入兩塊。但是，問題是我有不均勻的列數分成偶數列。這留下了一行2，然後是一行1.然後下一行創建一行2，然後是一行1.

是否有任何簡單的方法來使下一行「彈出」來完成同時在桌面上保持3列的同時在平板電腦上放置兩列的行？就目前而言，我的平板電腦上每排都有空列。

來源

2014-02-14 Brandon Smith

不要把它們放在不同的行，它應該表現你所描述的方式......

<div> 
    <div class="col-sm-6 col-md-4"> Uniform box of content here </div> 
    <div class="col-sm-6 col-md-4"> Uniform box of content here </div> 
    <div class="col-sm-6 col-md-4"> Uniform box of content here </div> 
    <div class="col-sm-6 col-md-4"> Uniform box of content here </div> 
    <div class="col-sm-6 col-md-4"> Uniform box of content here </div> 
    <div class="col-sm-6 col-md-4"> Uniform box of content here </div> 
</div>

小提琴... http://jsfiddle.net/gmU7w/

來源

2014-02-14 22:17:24

謝謝，這是做的伎倆。不確定這是否對一行大於12是有效的，但它只是按照預期將其壓低。 –

@BrandonSmith想想它的一種方式就像一個段落，每個div都是一個單詞。每個單詞有一定數量的寬度單位分配，只有12個單位可以放在一條線上。如果div不適合當前的「行」，它會「換行」到下一行。在上面的例子中，每個div在中等和更大的屏幕上都是4個單位寬（所以它形成2個3行），6個寬屏在小屏幕上（3行2）和（因爲沒有單位定義） x小（6行1）。您可以將外部div視爲段落本身。不確定這是否有幫助，但這就是我對BS3網格系統的看法。 :) –

看一看「混合寬度的列」節在http://www.helloerik.com/bootstrap-3-grid-introduction

來源

2014-02-14 22:20:01

3桌面上的列到平板上的2列

回答

相關問題