3列2行响应2列3行

Question

我使用Bootstrap css网格布局，它的工作原理非常棒。

我还没有找到一个例子，它可以响应并将3列和2行转换为2列和3行。

它所做的是创建6行的单列。我甚至可以将列从4转换为2，但是如何在3行中将它们转换为2行？

我想如果有偶数列的解决方案，那么它可以做到奇数。

Answer 1

尝试使用

<div class="col-xs-6 col-sm-6 col-md-4" ></div> 
<div class="col-xs-6 col-sm-6 col-md-4" ></div> 
<div class="col-xs-6 col-sm-6 col-md-4" ></div> 
<div class="col-xs-6 col-sm-6 col-md-4" ></div> 
<div class="col-xs-6 col-sm-6 col-md-4" ></div> 
<div class="col-xs-6 col-sm-6 col-md-4" ></div> 

Answer 2

考虑到你可能有（一语双关，我知道）想框外就这一个。如果您先排除不同阶段，它可能会更好地将其视觉化。

然后考虑你可能不需要行，除了包含列的行之外。在Bootstrap中，额外的列会自动强制第二行或第三行。

http://getbootstrap.com/css/#grid-example-mixed

你有6个总申报单。然后调整列类宽度数字。

现在你没有说如果你想在桌面大小的屏幕或移动设备上的三列。为了简单起见，我将在这里假设2列布局是移动布局。

<div class="row"> 
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div> 
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div> 
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div> 
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div> 
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div> 
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div> 
</div> 

可以切换它，但为什么把这么多列到这么小的空间......有可能是有理由这样做的，但它并不常见，由于手指宽度的问题。然而，Bootstrap是那种灵活的水平。

<div class="row"> 
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div> 
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div> 
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div> 
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div> 
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div> 
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div> 
</div> 

编辑 也有方法来保持它为中心使用偏移，如果你有说7列布局。它只需要调整列的宽度，然后添加偏移量以保持居中。

http://getbootstrap.com/css/#grid-offsetting

记得当加上了偏移一个重要的事情，就是山坳宽度加上偏移不能等于12或将被推一路的权利。当列宽为偶数时（2,4,6,8或10），它也可以工作得最好。

您可以练习JSfiddle或CodePen（在所见即所得的查看器中的codepen实时更新）。