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列

回答

相关问题