Bootstrap 表单：有没有办法让 .help-block 大于输入字段？

Question

我正在使用 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-5 class 替换为 col-md-8，它会增加输入字段和 .help-block 宽度（这是逻辑，因为它们都包含在同一个 div), 这使得布局中的输入字段太大。

有没有办法，使用 Twitter Bootstrap，拥有比相关输入字段更大的 .help-block，而不丢失表单的 "responsiveness"？

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

Bootstrap 表单：有没有办法让 .help-block 大于输入字段？

Bootstrap form : Is there a way to have the .help-block larger than the input field?

twitter-bootstrap

twitter-bootstrap-3