0

ブートストラップを使用してスパン内にスパンを配置する方法を理解するのにいくつかの困難があります。

内部で1つのブロックを中央に配置したい：

-内側に 1 行 :
-左に 1 ブロック (span6) -右に 1 ブロック (span6)

-内側の 1 行: -中央に配置された 1 つのボタン (スパン 6 オフセット 3)

ここで問題を確認できます: http://jsfiddle.net/UBTv4/18/

<div class='row'>
<div class='span6 offset3'>
    <div class='well'>
        <h2>Title</h2>      
            <div class='row'>
                <div class='span6'>
                    <p class="lead">Bloc left : </p>
                </div>              
                <div class='span6'>
                    <p class="lead">Bloc right : </p>
                </div>
            </div>
            <div class='row'>
                <div class='span6 offset3'>
                    <input id="play" type="submit" value="play" class="btn btn-primary"/>       
                </div>
            </div>
    </div>
</div>

何が問題ですか ？

私はそのようなものが欲しい：

ここに画像の説明を入力

4

3 に答える 3

3

これがあなたの解決策です。

<div class='row'>
    <div class='span6 offset3 well' >  <!-- .well class here instead of inner div -->
            <h2>Title</h2>      
                <div class='row'>
                    <div class='span3'> <!-- instead of span6 -->
                        <p class="lead">Bloc left : </p>
                    </div>              
                    <div class='span3'> <!-- instead of span6 -->
                        <p class="lead">Bloc right : </p>
                    </div>
                </div>
                <div class='row'>
                    <div class='span3 offset3'>  <!-- instead of span6 -->
                        <input id="play" type="submit" value="play" class="btn btn-primary"/>       
                    </div>
                </div>
        </div>
</div>

http://jsfiddle.net/UBTv4/23/

説明として、このリンクからネスティング列セクションを注意深く読むことをお勧めします。

http://getbootstrap.com/2.3.2/scaffolding.html

簡単に説明すると、span6 で行をネストする場合、内側の行スパンの合計も 6 (3+3) になるはずです。

また、 .well クラスにはいくつかのパディング/マリングがあるため、親とネストされた行/スパンの間でそれを行うことはできません。

于 2013-05-11T18:10:14.863 に答える
0

また、pull-right と pull-left を使用して、それぞれのブロックを左右に動かすこともできます。

</div>              
                <div class='span6'>
                    <p class="lead pull-right">Bloc right : </p>
                </div>
            </div>
            <div class='row'>
                <div class='span6 offset3'>
                    <input id="play" type="submit" value="play" class="btn btn-primary"/>       
                </div>
            </div>
    </div>
</div>

ここでコードを見ることができます: http://jsfiddle.net/UBTv4/18/

于 2013-05-11T17:52:15.867 に答える