0

私はbootstrap3を使用していますが、達成しようとしているのは次のとおりです。

幅 100% の大きな div があります

.bigdiv { width: 100% }

その bigdiv に、4 つの小さな div を配置したいと考えています。幅は同じですが、そのうちの 1 つは高さが異なります。

これらの 4 つの div は、.bigdiv div で中央揃え (水平方向) に配置する必要があります。ただし、ウィンドウのサイズを変更すると、それらは下に流れて互いに積み重ねられますが、それでも中央に配置されます。ウィンドウのサイズ変更を流動的に積み重ねるために、試しfloat:leftましたが、目的のビューが得られません。

サイズ変更の前後に、これらの小さな div を中央に保持するのに苦労しています。可能なシナリオを示す添付の画像を参照してください ここに画像の説明を入力 ここに画像の説明を入力ここに画像の説明を入力ここに画像の説明を入力 。

4

2 に答える 2

1

グリッドに関するブートストラップ ドキュメントを確認してください... bigdiv 内で div を中央に配置するには、class: .container を含む div を追加し、その中にクラス行を含む div、次に cols を追加する必要があります...次のように:

<div class="bigdiv">
    <div class="container">
        <div class="row">
            <div class="col-md-3">Col 1</div>
            <div class="col-md-3">Col 2</div>
            <div class="col-md-3">Col 3</div>
            <div class="col-md-3">Col 4</div>
        </div>
    </div>
</div>

ブートストラップは 12 列のグリッドを使用するため、必要に応じて col-lg-3 の数字を置き換えてください。

デモ: http://jsfiddle.net/gaSJR/

于 2013-10-29T06:16:53.887 に答える
1

display: inline-blockこれは、子とtext-align:center親で次を使用して簡単に実現できます。

HTML

<div class="bigdiv">
    <div class="smalldiv"></div>
    <div class="smalldiv"></div>
    <div class="smalldiv"></div>
    <div class="smalldiv"></div>
</div>

CSS

.bigdiv {
    text-align:center;
}

.smalldiv{
    width: 100px;
    height: 100px;
    background: red;
    display: inline-block;
}

.smalldiv:nth-child(3){
    height: 200px;
}

デモフィドル

于 2013-10-29T06:23:13.510 に答える