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實時更新）。