Question

我正在使用bootstrap 3并尝试显示多行，每行包含3个框。所有盒子都是相同的尺寸，因此非常均匀。您可以将其描绘为网格。在平板电脑上我只想要两列。

<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列？就目前而言，我的平板电脑上每隔一行都有空列。

Answer 1

不要将它们放入单独的行中，它应该按照您描述的方式运行......

<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/

Answer 2

查看http://www.helloerik.com/bootstrap-3-grid-introduction

处的“混合宽度列”部分

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

2 个答案: