在Twitter Bootstrap中没有任何brew 类的情况下,设计类似这样的表单(请参见下面的链接)的最佳方式是什么?
是否可以将内部表单内联设置为表单水平,如下例所示:
在Twitter Bootstrap中没有任何brew 类的情况下,设计类似这样的表单(请参见下面的链接)的最佳方式是什么?
是否可以将内部表单内联设置为表单水平,如下例所示:
不要嵌套<form>
个标签,这将不起作用.只需使用 bootstrap 类.
<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>
你可以通过多种方式实现这种行为,这只是一个例子.在这bootply台上测试一下
<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
中获得propper样式