帶Bootstrap的響應式網頁設計：用於3列和2列網格佈局的等高盒

Question

我使用Bootstrap 3.2.0，並且我有6個盒子的網格設計。

前三個框的內容比最後三個框的內容更多。

對於大尺寸屏幕，我有3列布局，適用於中等尺寸屏幕尺寸2列和小尺寸1列。 1列布局不是問題，因爲所有的盒子都會垂直放置。

對於3列布局，方框1,2和3應該以相同的高度排成一排。對於方框4,5和6也是如此：在第一排之下的一排中並且具有相同的高度。

對於2-colums佈局，框1和框2應該在一個框中，框3和4,5應該在一行中，並且框6在左側的最後一行中。

你可以看到這就是我想在這樣的畫面：

我做了小提琴，所以你可以看到我做了什麼： http://jsfiddle.net/5tJk3/

這裏是代碼片段：

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="col-sm-6 col-md-4"> 
      <div class="bs-grid-big"> 
       Box 1 
      </div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="bs-grid-big"> 
       Box 2 
      </div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="bs-grid-big"> 
       Box 3 
      </div> 
     </div> 
    </div> 

    <div class="row-fluid"> 
     <div class="col-sm-6 col-md-4"> 
      <div class="bs-grid-small"> 
       Box 4 
      </div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="bs-grid-small"> 
       Box 5 
      </div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="bs-grid-small"> 
       Box 6 
      </div> 
     </div> 
    </div> 
</div> 

有沒有一種簡單的方法來做到這一點與Bootstrap？我認爲2列布局將很難得到方框4和5與盒子3相等的高度。

Answer 1

這裏是我做的 我把固定的高度放在.bs-grid-big和一半的.bs-grid-small +額外的20px到.bs-grid-big，因爲你的h2裏面有很小的尺寸，並且它的margin爲20px。

(http://jsfiddle.net/5tJk3/1/) 

這是你想要的嗎？ 你應該看看比賽的jQuery插件高度

​​

Answer 2

可以使用真棒.hidden-sm .clearfix連擊絕招，通過將其放入一個空div您的第5列後。它只會在sm設備上清除修復，將第六列放在左側。無需自定義CSS。

<div class="visible-sm clearfix"></div> 
<div class="col-sm-6 col-md-4">Column 6 Lorem Ipsum 
... 

演示：http://www.bootply.com/mYKLVnKl0k