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

Question

My 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/

Answer 2

你可以用Jquery

来做

$(document).ready(function() {
    var x=$('.row');
    $.each(x, function() {
        var max=0;
        $.each($(this).find('div[class^="col-"]'), function() {
            if($(this).height() > max)
                max=$(this).height();
        });
        $.each($(this).find('div[class^="col-"]'), function() {
            $(this).height(max);
        });
    });
});