次のシナリオでブートストラップform
を使用してスタイルを設定する正しい方法は何ですか:
フィールドセットを使用する必要があります(後でスタイル設定されます)
form
2つの列に分割する必要があります各列には 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
や他のクラスの使用方法ではないと感じています。