twitter-bootstrap - 桌面上的 3 列到平板上的 2 列

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>

fiddle ... http://jsfiddle.net/gmU7w/