引导表单：有没有办法让 .help-block 大于输入字段？答案

【问题标题】：Bootstrap form : Is there a way to have the .help-block larger than the input field?引导表单：有没有办法让 .help-block 大于输入字段？
【发布时间】：2015-05-12 22:59:17
【问题描述】：

我正在使用 Twitter Bootstrap3 构建一个（长）表单，但我遇到了一个需要详细解释的小字段的设计问题。

<form class="form-horizontal">
  <fieldset>
    <!-- Form Name -->
    <legend>The form</legend>

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="username">Username</label>  
      <div class="col-md-5">
        <input id="username" name="username" placeholder="" class="form-control input-md" required="" type="text">
        <span class="help-block">A very long explanation, that is longer than the above input field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>  
      </div>
    </div>
  </fieldset>
</form>

如果我用 col-md-8 替换 col-md-5 类，它会增加输入字段和 .help-block 宽度（这是逻辑，因为它们都包含在同一个 div 中），这会导致输入字段过大布局。

有没有办法使用 Twitter Bootstrap 来获得比相关输入字段更大的 .help 块，而不会失去表单的“响应能力”？

【问题讨论】：

长尺寸违背了help-block的全部目的。

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这可以通过为help-block 使用不同的列并偏移包含 div 的帮助块来完成！

Bootply example here

<div class="form-group">
      <label class="col-md-4 control-label" for="username">Username</label>  
      <div class="col-md-5">
        <input id="username" name="username" placeholder="" class="form-control input-md" required="" type="text">
       </div>
        <div class="col-md-8 col-md-offset-4">
      <span class="help-block">A very long explanation, that is longer than the above input field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>  
      </div>
    </div>

【讨论】：