html - 如何在 Twitter Bootstrap 中将帮助文本添加到输入上方而不是下方

Question

在使用 Twitter Bootstrap 创建表单时，如何将帮助文本添加到输入的上方而不是下方。当我使用“help-block”类在输入上方插入语句时，标签和输入不再对齐。有解决办法吗？

Answer 1

bootstrap 在它的 css 类中已经有了这种资源。看看samples .

您的代码必须在 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>