Twitter引导程序3在单行上形成水平和多个输入列
sur*_*tus 25 css twitter-bootstrap-3
我需要在单行中放置多列输入,如下所示:
我通过将多个输入分组为单一来做到这一点form-group,但这样我就不能使用has-error类了.
<div class="form-group">
<label class="control-label col-sm-4">Quarter</label>
<input type="text" class="col-sm-20" />
</div>
<div class="form-group">
<label class="control-label col-sm-4">Address</label>
<input type="text" class="col-sm-15" />
<label class="control-label col-sm-2">Addr. ?</label>
<input type="text" class="col-sm-3" />
</div>
<div class="form-group">
<label class="control-label col-sm-4">Block name/Number</label>
<input type="text" class="col-sm-5" />
<label class="control-label col-sm-2">Entrance</label>
<input type="text" class="col-sm-3" />
<label class="control-label col-sm-2">Floor</label>
<input type="text" class="col-sm-3" />
<label class="control-label col-sm-2">Apartament</label>
<input type="text" class="col-sm-3" />
</div>
那么form-group每个输入框可能有多个？
Zim*_*Zim 19
您需要将输入包装在自己的col-*类中,如下所示.
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Quarter</label>
<div class="col-md-10">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Address</label>
<div class="col-md-8">
<input type="text" class="form-control">
</div>
<label class="control-label col-sm-1">Addr. ?</label>
<div class="col-md-1">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Block name/Number</label>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
<label class="control-label col-sm-1">Entrance</label>
<div class="col-md-1">
<input type="text" class="form-control">
</div>
<label class="control-label col-sm-1">Floor</label>
<div class="col-md-1">
<input type="text" class="form-control">
</div>
<label class="control-label col-sm-1">Apartment</label>
<div class="col-md-1">
<input type="text" class="form-control">
</div>
</div>
</form>
此外,没有col-sm-15或col-sm-20在Bootstrap中
- 在此示例中,不可能仅将错误标记为一行中的一个字段.或者我错过了什么. (3认同)
Sep*_*phy 14
要在引导程序3中轻松对齐,您应该使用网格系统.
这是一个贴近您需求的小提琴:
<body>
<form class="form-horizontal">
<div class="row">
<div class="form-group">
<label class="col-sm-2">Quarter</label>
<div class="col-sm-10"><input type="text" class="form-control" /></div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-2">Address</label>
<div class="col-sm-5"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-2">Addr. ?</label>
<div class="col-sm-3"><input type="text" class="form-control" /></div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-2">Block name/Number</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-1">Entrance</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-1">Floor</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-2">Apartament</label>
<div class="col-sm-3"><input type="text" class="form-control" /></div>
</div>
</div>
</form>
</body>
对齐取决于屏幕的宽度,因此请务必根据您的需要进行调整.然后您可以自己设置输入样式.
- 你小提琴不包括`form-group`元素. (3认同)
| 归档时间： |
|
| 查看次数： |
46564 次 |
| 最近记录： |