3

私の Bootstrap 3 グリッド レイアウトは次のようにレンダリングされます。

ただし、1 番目の div (黄色) と 3 番目の 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>

4

2 に答える 2

1

古い質問ですが…</p>

あなたのソリューションはかなり良く見えます - 実際、必要なのはfloat: right;青い 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/

于 2014-06-02T17:19:13.780 に答える
0

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);
        });
    });
});
于 2013-10-09T09:16:59.667 に答える