Bootstrap 表单:有没有办法让 .help-block 大于输入字段? [英] Bootstrap form : Is there a way to have the .help-block larger than the input field?

问题描述

我正在使用 Twitter Bootstrap3 构建(长)表单，但我遇到了需要详细解释的小字段的设计问题.

<字段集><!-- 表单名称--><legend>表格</legend><!-- 文本输入--><div class="form-group"><label class="col-md-4 control-label" for="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">很长的解释，比上面的输入框还长.Lorem ipsum dolor sat amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris nisi ut aliquip ex ea commodo consequat.</span>

</fieldset></表单>

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

有没有办法使用 Twitter Bootstrap 来拥有比相关输入字段更大的 .help-block，同时又不会失去表单的响应性"?

解决方案

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

此处是 Bootply 示例

<label class="col-md-4 control-label" for="username">用户名</label><div class="col-md-5"><input id="username" name="username" placeholder="" class="form-control input-md" required="" type="text">
<div class="col-md-8 col-md-offset-4"><span class="help-block">很长的解释，比上面的输入框还长.Lorem ipsum dolor sat amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris nisi ut aliquip ex ea commodo consequat.</span>

I am building a (long) form using Twitter Bootstrap3, and I have a design problem with small fields that need a long explanation.

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

If I replace the col-md-5 class by col-md-8, it increases both input field and .help-block width (which is logic since they are both contained in the same div), this gives a too large input field in the layout.

Is there a way, using Twitter Bootstrap, to have a larger .help-block than the related input field, without loosing the "responsiveness" of the form ?

解决方案

This can be done using a different column for the help-block and offsetting the help-block containing 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 大于输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！