1

Bootstrap 3 で div を揃えようとすると問題が発生します。

これが私が達成しようとしていることです： ここに画像の説明を入力

私はプルとプッシュで作業しましたが、私はそれで十分ではないと思います.

コード：

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

4

3 に答える 3

1

pull紫色のブロックの を削除するだけで、HTML は完全に機能します。

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;
    }
}

明らかな欠点は、修正がメディア クエリをサポートするブラウザに限定されることです。したがって、ブラウザ間で一貫して機能すると仮定すると、クリスティーナの答えの方が優れています。

于 2014-10-27T22:21:10.633 に答える
-1

div の表示タイプは「ブロック」です。デフォルトでは、各 div が別の div の下に表示されることを意味します。

これは、何らかの方法で css の一部を変更したことを意味します。具体的には float または display:inline を使用しています。

これを見つけて変更する方法がわからない場合は、各 div が wi​​dth:100%; であることをいつでも確認できます。

これにより、div がその親コン​​テナーの幅全体を確実にキャッチします。

于 2014-10-27T21:20:26.240 に答える