在没有任何自制类的 twitter bootstrap 中设计一个看起来像这样的表单(请参阅下面的链接)的最佳方法是什么?
是否可以像下面的示例一样在表单水平内设置内部表单内联:
最佳答案
不要嵌套 <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
中获得适当的样式.
您可以在 this 上进行测试jsfiddle
https://stackoverflow.com/questions/12201835/