css - 如何删除 Bootstrap 3 网格布局中 div 之间的垂直空间？

Question

我的 Bootstrap 3 网格布局呈现如下:

但是，我不想要第一个 div(黄色)和第三个 div(红色)之间的空间。

这是我的代码:

<div class='row'>   
<div class="col-xs-12 col-sm-6" style='background-color:yellow;height:100px'>1st div</div>
<div class="col-xs-12 col-sm-6" style='background-color:blue;height:200px'>2nd div</div>
<div class="col-xs-12 col-sm-6" style='background-color:red;height:100px'>3rd div</div>
</div>

有什么想法吗？

更新:

我想我找到了解决方案..

<div class='row'>
<div class="col-xs-12 col-sm-6" style='background-color:yellow;height:200px'>1st Div</div>
<div class="col-xs-12 col-sm-6" style='float:right;background-color:blue;height:600px'>2nd Div</div><br/><div class="clearfix visible-xs"></div>
<div class="col-xs-12 col-sm-6"  style='background-color:red;height:2000px'>3rd Div</div>

Answer 1

老问题，但是……

您的解决方案看起来很不错 - 事实上，您所需要的只是蓝色 div 上的 float: right;，但如果您使用 992px 以上的其他格式，它在媒体查询中的效果会更好, div 保持正确的顺序:

html:

<div class='row'>   
    <div class="col-xs-12 col-sm-6 col-md-4 yellow">1st div</div>
    <div class="col-xs-12 col-sm-6 col-md-4 blue">2nd div</div>
    <div class="col-xs-12 col-sm-6 col-md-4 red">3rd div</div>
</div>

CSS:

.yellow {
    background-color:yellow;
    height:100px;
}
.blue {
    background-color:blue;
    height:200px;
}
.red {
    background-color:red;
    height:100px;
}

@media (min-width: 768px) and (max-width: 991px) {
    .blue {
        float: right;
    }
}

http://jsfiddle.net/memeLab/M4P6g/1/