移動版本中的引導列

Question

我使用引導程序來創建網站，但這是錯誤的。

我想做2行3列，當屏幕更改爲移動時，我希望它是3行2列。

桌面

|A| |B| |C| 
|D| |E| |F| 

移動

|A| |B| 
|C| |D| 
|E| |F| 

我用下面的代碼來做到這一點，但圖像不留像我想它。

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

的圖像始終這樣

|A| |B| 
    |C| 
|D| |E| 
|F| 

提前感謝！

Answer 1

我以前遇到過這個問題。問題在於我的內容是不同的高度。因爲Bootstrap使用浮動來排列它的列，所以如果列A比列B高，則列C不能一直浮動到左邊。

我已經包含指向codepen的鏈接，因此您可以在行動中看到它。上面兩行正好是上面的代碼，而下面兩行顯示的div的高度與其他div不同。

http://codepen.io/egerrard/pen/PGRQYK

你的將是你的div的高度設置爲所有內容的最大高度的解決方案。類似於

.maxHeightDiv { 
    height: 200px; 
} 

您可能必須爲不同的窗口寬度設置高度。它可能有點煩人，但這是自舉浮動系統的一個警告。

Answer 2

您可以使用下面的類如...

1. col-xs-2 - 將兩列只在XS設備 - （移動）
2. col-md-3 - 將其他所有設備的移動3列

<div class="row"> <div class="col-xs-2 col-md-3">Content</div> .... </div> 你不能沒有使用JS但是改變行。 此外，在手機上，它真的很重要...？