9

次のシナリオでブートストラップformを使用してスタイルを設定する正しい方法は何ですか:

2 列のフォーム ビュー

  1. フィールドセットを使用する必要があります(後でスタイル設定されます)

  2. form2つの列に分割する必要があります

  3. 各列には label+control があり、一部には label+control1+control2 などがあります。

私はブートストラップが初めてです。次の解決策 (jsfiddle)にたどり着きました。

問題は、これはこれを行う正しい方法ですか? ブートストラップのセマンティクスに違反していませんか?

の使い方がわからないform-groupのですが、正しく使っていますか?

正しいセマンティクスのためにここにいくつかclass="row"を含めるべきではありませんか?

HTML:

<div class="container">
... <some content here> ....

<form class="form-horizontal">
    <fieldset>
        <legend>Portfolio</legend>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">Label1</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="control1" />
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">label2</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="control2" />
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">label3</label>
                <div class="col-xs-8 form-inline">
                    <div class="form-group col-xs-6">
                        <input type="text" class="form-control" placeholder="control1" />
                    </div>
                    <div class="form-group col-xs-6">
                        <input type="text" class="form-control" placeholder="control2" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">Label1</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="control1" />
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">label2</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="control2" />
                </div>
            </div>
        </div>
    </fieldset>
</form>
</div>

Bootstrap フォームの例はすべて見ましたがform、2 つの列に分割する方法がわかりません。私もドキュメンテーション全体を読みましたが、これは正しい方法colや他のクラスの使用方法ではないと感じています。

4

2 に答える 2