自作のクラスを使用せずに、Twitter Bootstrap で次のようなフォーム (下のリンクを参照) を設計する最適な方法は何ですか?
以下の例のように、form-horizontal 内に inner form-inline を設定することは可能ですか?
ベストアンサー1
タグをネストしない<form>
でください。機能しません。Bootstrap クラスのみを使用してください。
ブートストラップ3
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-md-2 control-label">Type</label>
<div class="col-md-3">
<input type="text" class="form-control" id="inputType" placeholder="Type">
</div>
</div>
<div class="form-group">
<span class="col-md-2 control-label">Metadata</span>
<div class="col-md-6">
<div class="form-group row">
<label for="inputKey" class="col-md-1 control-label">Key</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-1 control-label">Value</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</div>
</form>
この動作はさまざまな方法で実現できますが、これは単なる例です。これをテストしてくださいブートプライ
ブートストラップ 2
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputType">Type</label>
<div class="controls">
<input type="text" id="inputType" placeholder="Type">
</div>
</div>
<div class="control-group">
<span class="control-label">Metadata</span>
<div class="controls form-inline">
<label for="inputKey">Key</label>
<input type="text" class="input-small" placeholder="Key" id="inputKey">
<label for="inputValue">Value</label>
<input type="password" class="input-small" placeholder="Value" id="inputValue">
</div>
</div>
</form>
.form-inline
内部で適切なスタイルを得るためにを使用していることに注意してください.controls
。
これjsfiddle