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

Question

在使用Twitter Bootstrap创建表单时,如何在输入上方而不是在输入下方添加帮助文本.当我使用"help-block"类在输入上方插入语句时,标签和输入不再对齐.有办法吗？

Answer 1

将help-block类元素添加到控件之前

<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/

Answer 2

引导程序已经在它的css类上有这种资源.看看样本(http://v4-alpha.getbootstrap.com/components/forms/).

您的代码必须位于表单组类中,如下所示:

<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>

上面的样本