0

私はこのコードを持っています:

http://jsfiddle.net/dtjmsy/8BDRj/

<div class="row-fluid">
    <div class="span2">
        <img src="http://autooccasion76.files.wordpress.com/2010/11/clio_rs1.gif" class="img-polaroid">
    </div>
    <div class="span1">
        <span class="labelColorBlue">Statut:</span>
    </div>
    <div class="span2">
        <INPUT type="Text" value="Valeur" name="TxtBox">              
    </div>

    <div class="clearfix"></div>

    <div class="span2 offset2" style="background-color: blue">...</div>

</div>​

画像、ラベル、テキストボックス、青い四角形があり、すべてスパン2です。取得したいのは

ブルーボックスは画像の左側、ラベルとテキストボックスの下に配置されます

clearfix または offset クラスを試してみましたが、それらはすべて画像の下に青い四角形を配置しました。ラベルとテキストボックスの高さのすぐ下、高さに関係なく画像の右側に配置するにはどうすればよいですか?

乾杯

4

1 に答える 1

2

グリッドは、行を垂直に積み重ね、列を水平に積み重ねるように設計されています。これらの原則に基づいてレイアウトを考える必要があります。

私の理解が正しければ、2 つの列を使用する必要があります。1 つは画像用、もう 1 つは残り用です。この 2 番目の列は、ラベル + 入力と青いバーの 2 つの行に分割されます。

デモ (jsfiddle)

<div class="row-fluid">
    <div class="span2">
        <img src="..." class="img-polaroid">
    </div>
    <div class="span3">
        <div class="row-fluid">
            <div class="span4">
                <span class="labelColorBlue">Statut:</span>
            </div>
            <div class="span8">
                <INPUT type="Text" value="Valeur" name="TxtBox" />              
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12" style="background-color: blue">...</div>
        </div>
    </div>
</div>

(jsfiddle)のように、列に収まるようにオーバーライドする必要がある独自の幅があるため、入力には注意してください。<INPUT class="span12" ... />

流動グリッドには、子孫を作成するたびに 12 の列があることに注意してください (% と考えてください)。疑問がある場合は、流体グリッドのネストに関するドキュメントを確認してください。

于 2012-11-07T23:03:32.740 に答える