引导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更好，假设它在不同浏览器中一致地工作。