在使用 Twitter Bootstrap 创建表单时,如何在输入上方而不是下方添加帮助文本。当我使用“帮助块”类在输入上方插入语句时,标签和输入不再对齐。有办法解决吗?
问问题
33026 次
2 回答
14
引导程序的 css 类中已经有这种资源。看看样品。
您的代码必须在一个form-group
类中,如下所示:
<div class="form-group">
<label for="info-email" class="col-xs-2 control-label">e-mail</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="info-email" placeholder="Your e-mail">
<small class="text-muted">We'll never share your email with anyone else.</small>
</div>
</div>
而且,如果您需要将帮助文本放在输入上方,只需将 的位置更改为<small>...</small>
输入上方:
<div class="form-group">
<label for="info-email" class="col-xs-2 control-label">e-mail</label>
<div class="col-xs-10">
<small class="text-muted">We'll never share your email with anyone else.</small>
<input type="text" class="form-control" id="info-email" placeholder="Your e-mail">
</div>
</div>
于 2015-11-30T12:07:12.800 回答
8
将帮助块类元素添加到控件
<div class="control-group">
<label for="prependedInput" class="control-label">Prepended text</label>
<div class="controls">
<p class="help-block">Here's some help text</p>
<div class="input-prepend">
<input type="text" class="span2" id="prependedInput" size="16">
</div>
</div>
而不是追加
<div class="control-group">
<label for="prependedInput" class="control-label">Prepended text</label>
<div class="controls">
<div class="input-prepend">
<input type="text" class="span2" id="prependedInput" size="16">
</div>
<p class="help-block">Here's some help text</p>
</div>
演示:http: //jsfiddle.net/D2RLR/935/
于 2012-08-07T07:04:53.447 回答