1

ブートストラップ グリッド システムを使用してフォーム フィールドをレイアウトする素晴らしい方法を見つけました。jsfiddle リンクを参照してください。 http://jsfiddle.net/kUNVs/

郵便番号フィールドにラベルを配置しても、すべて問題ないように見えます。しかし、同じ「ロジック」を使用してラベルを都市フィールドに適用すると、郵便番号ラベルの下に配置されます。または、2 番目の例では、レイアウトを完全にホースします。

問題は、上記の jsfiddle の例に基づいて、ラベルを都市フィールドに追加し、郵便番号ではなく都市の上に配置するにはどうすればよいかということです。

私はこれを試しました。

<label for="zipcode">Zip Code</label>
<label for="city">City</label>
<div class="controls controls-row">
 <input type="text" id="zipcode" class="span1" placeholder="Zipcode"/>
 <input type="text" id="city" class="span2" placeholder="City"/>
</div>

この

<div class="controls controls-row">
 <label for="zipcode">Zip Code</label>
 <input type="text" id="zipcode" class="span1" placeholder="Zipcode"/>
 <label for="city">City</label>
 <input type="text" id="city" class="span2" placeholder="City"/>
</div>
4

1 に答える 1

2

これで良いスタートが切れるはずです:

<form>
    <div class="controls controls-row">
        <label for="street">Address</label>
        <input type="text" class="span3" id="street" name="street" placeholder="Street"/>
    </div>
    <div class="controls controls-row">
        <div class="row">
            <div class="span2">
                <label for="zipcode">Zip</label>
                <input type="text" id="zipcode" class="span1" placeholder="Zipcode"/>
            </div>
            <div class="span4">
                <label for="city">City</label>
                <input type="text" id="city" class="span2" placeholder="City"/>
            </div>
        </div>
    </div>
</form>

Live Demo - Basic

.span22 つのスパン (と a ) を使用して郵便番号と都市を.span4区切る行を追加しました。もし私があなたなら、入力自体のスパン クラスも更新して、コンテナー スパンに一致させます。

Live Demo - With Input Spans

于 2013-03-11T20:08:35.353 に答える