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替换col-md-8类，它会增加输入字段和.help-block宽度（这是逻辑，因为它们都包含在同一个div中），这也给出了布局中的大输入字段。

有没有一种方法，使用Twitter Bootstrap，比相关的输入字段有更大的.help-block，而不会失去＆＃34;响应性＆＃34;形式？

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比输入字段大？

1 个答案: