1

Twitter Bootstrapを使用しています。フォームでは、水平レイアウトと垂直レイアウトを行うことができますが、クラスは<form>タグにあります。では、スペースを節約したい場所と、いくつかの入力ボックスを水平に配置し、残りを垂直に配置する方法の両方を少し行うにはどうすればよいでしょうか?

次のようなフォームがあります。

Address [__________________]
City [___________]
State [__]
Zip [_____]
Country [____]

しかし、私はそれを次のようにしたい：

Address [__________________]
City [___________]
State [__] Zip [_____] Country [____]

CSSを手伝ってください。

これが私のコードです：

<form class="form-horizontal">
    <fieldset>
        <div class="row-fluid"> 
            <div class="span6">
                <div class="control-group">
                    <label class="control-label" for="Address">Mailing Address</label>
                    <div class="controls">
                        <input data-val="true" data-val-required="Required" id="mailing" name="Address" type="text" value="1313 Mockingbird Lane" class="valid">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="City">City</label>
                    <div class="controls">
                        <input class="span3 valid" id="city" name="City" type="text" value="Kaysville">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="State">State</label>
                    <div class="controls">
                        <input class="span2" id="state" name="State" type="text" value="UT">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="PostalCode">Zip</label>
                    <div class="controls">
                        <input class="span2" id="postalCode" name="PostalCode" type="text" value="12345">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="Country">Country</label>
                    <div class="controls">
                        <input class="span3" id="country" name="Country" type="text" value="US">
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</form>
4

3 に答える 3

3

これは私のために働いた

<div class="control-group">
    <label class="control-label" for="inputPLZ">PLZ*</label>
    <div class="controls">
        <input type="text" class="input-mini" id="inputPLZ">                                        
        Ort*
        <input type="text" class="input-medium" id="inputOrt">
    </div>
</div>

このようにレンダリングされます

ここに画像の説明を入力

于 2012-07-30T18:50:14.410 に答える
0

状態、郵便番号、および国を div でラップし、子要素を左にフロートさせ、整列させる必要があります。私はBootstrapの経験がないので、それが何かに影響するかどうかはわかりません

于 2012-07-26T15:01:15.123 に答える
0

ブートストラップの設定方法を理解するのに役立ちます。

.control-labelクラスは、フォームの左側のインジケータです。これは、フォームの左 140px を取り、左にフロートします。クラスは、フォームのコンテナの.controls右側で、フローティングせずに、160px の余白を自分自身に単純に適用します。

これを知っていれば、Bootstrap を通常の HTML のように扱うことができます。次のように、すべての入力を同じコントロールに含めることができます。

<div class="control-group">
    <div class="controls">
        State: <input class="span2" id="state" name="State" type="text" value="UT">
        Zip: <input class="span2" id="postalCode" name="PostalCode" type="text" value="12345">
        Country: <input class="span3" id="country" name="Country" type="text" value="US">
    </div>
</div>

.control-label配置を一致させたい場合は、水平セットの最初のラベルを次のようにして、少しトリックを使用します。

<div class="control-group">
    <label class="control-label">State:</label>
    <div class="controls">
        <input class="span2" id="state" name="State" type="text" value="UT">
于 2012-07-26T15:10:10.417 に答える