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

老问题，但是……</p>

您的解决方案看起来不错 - 实际上您只需要float: right;蓝色 div 上的 div，但它在媒体查询中效果更好，这样如果您使用 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);
        });
    });
});