2

ブートストラップを使い始めたばかりです。「住所」フィールドを形成するには、3 つの入力フィールドを配置する必要があります。

私が達成しようとしていること

次のhtmlを使用してみました：

<label for="street">Address</label>
<input class="span3" id="street" name="street" placeholder="Street"/><br/>

<input id="zipcode" class="span1 inline" placeholder="Zipcode"/>
<input id="city" class="span2 inline" placeholder="City"/>

これはほぼ正しいですが、サイズが少しずれています

正しくない

このレイアウトを実現するためのより良い方法はありますか (正しい幅を実現するためにカスタム スタイルを作成する必要はありません)。

4

4 に答える 4

10

以下を使用してみてください。

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

フィドル はこちら

于 2012-09-04T11:31:06.407 に答える
1

ガター幅とスパン幅をカスタマイズします。正確な幅には、スパン 24 の方が適していると思います。ガター幅 10px と span1 30px span2 70px など .... SASS または LESS を使用していることを教えてください

もしサス

$gridColumns: 24
$gridColumnWidth: 30px
$gridGutterWidth: 10px

sass ファイルに追加しますが、bootstrap sass ファイルをインポートすることを忘れないでください

もう 1 つ - Twitter ブートストラップを使用している間は、control-group やその他のフォーマットを使用する必要があることをここで忘れていました。ブートストラップサイトを参照してください

于 2012-05-02T14:39:37.600 に答える
0

「インライン」クラスなしで「span2」および「span1」クラスを使用した場合、グリッドにレイアウトが正しい余白で表示されるだけだと思いました。ずれの原因は余白のようです。

于 2012-05-02T14:55:46.723 に答える
0

そのため、私はしばらくこれに苦労していましたが、最終的に解決策を見つけました。これが私が思いついたものです。これは、水平 (インライン) フィールドを持つ単純な登録フォームです。

于 2016-02-17T16:25:14.013 に答える