引導DIV alignement問題

Question

我有問題想對準我的DIV在引導3

這裏就是我試圖完成：

我與拉合作和推動，但我想我它不夠好。

代碼：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-9 col-md-push-3 blue"> 
      blue 
     </div> 
     <div class="col-md-3 col-md-pull-9 red"> 
      red 
     </div> 
     <div class="col-md-9 col-md-push-3 orange"> 
      orange 
     </div> 
     <div class="col-md-3 col-md-pull-9 green"> 
      green 
     </div> 
     <div class="col-md-3 col-md-pull-9 purple"> 
      purple 
     </div>    
    </div> 
</div> 

http://jsfiddle.net/bva5z74w/1/

由於

Answer 1

我在看這個，看看有沒有人會回答這個問題：不要使用bootstrap push和pull。使用浮動權，並沒有浮動。在最小寬度處藍色必須比紅色高，除了我認爲這將工作順利。

DEMO：http://jsbin.com/degeju/1/

CSS：

.blue { 
    background: blue 
} 
.red { 
    background: red 
} 
.orange { 
    background: orange 
} 
.green { 
    background: green 
} 
.purple { 
    background: purple 
} 
.red, 
.blue, 
.green, 
.orange, 
.purple { 
    height: 50px 
} 

@media (min-width:992px) { 
    .blue { 
     height: 600px; 
     float: right; 
    } 
    .red { 
     height: 300px; 
     float: none; 
    } 
    .orange { 
     height: 400px; 
     float: right; 
    } 
    .green { 
     height: 200px; 
     float: none; 
    } 
    .purple { 
     height: 200px; 
     float: none; 
    } 
} 

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-md-9 blue"> 
      blue 
     </div> 
     <div class="col-md-3 red"> 
      red 
     </div> 
     <div class="col-md-9 orange"> 
      orange 
     </div> 
     <div class="col-md-3 green"> 
      green 
     </div> 
     <div class="col-md-3 purple"> 
      purple 
     </div>    
    </div> 
</div> 

Answer 2

div有顯示類型 「塊」，默認情況下這意味着每個DIV以下將示出另一個DIV。

這意味着你已經改變了一些CSS，特別是浮動或顯示：內聯。

如果您不確定如何找到並更改此設置，您可以始終確保每個div都具有寬度：100％;

這將確保div捕捉它的父容器的整個寬度。

Answer 3

你會很好地工作的HTML，只是刪除紫色塊上的pull：

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-9 col-md-push-3 blue"> 
      blue 
     </div> 
     <div class="col-md-3 col-md-pull-9 red"> 
      red 
     </div> 
     <div class="col-md-9 col-md-push-3 orange"> 
      orange 
     </div> 
     <div class="col-md-3 col-md-pull-9 green"> 
      green 
     </div> 
     <div class="col-md-3 purple"> 
      purple 
     </div>    
    </div> 
</div> 

http://www.bootply.com/dMNG75tSf0

編輯：

的float左側元素正在導致它們崩潰以適應其內容。但是，通過媒體查詢，您可以將高度設置爲與相鄰右元素相同的高度。

@media (max-width:1199px) { 
    .red { 
     height: 360px; 
    } 
} 
@media (min-width:1200px) { 
    .red { 
     height: 300px; 
    } 
} 

明顯的缺點是這限制了對支持媒體查詢的瀏覽器的修復。因此，Christina's answer更好，假設它在不同瀏覽器中一致地工作。