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

Posted

技术标签:

【中文标题】如何在 Twitter Bootstrap 中在输入上方而不是下方添加帮助文本【英文标题】:How to add help-text above input rather than below it in Twitter Bootstrap 【发布时间】:2012-08-04 03:47:04 【问题描述】:

在使用 Twitter Bootstrap 创建表单时,如何在输入上方而不是下方添加帮助文本。当我使用“帮助块”类在输入上方插入语句时,标签和输入不再对齐。有办法解决吗?

【问题讨论】:

【参考方案1】:

引导程序的 css 类中已经有这种资源。看看samples。

您的代码必须在 form-group 类中,如下所示:

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

而且,如果您需要将帮助文本放在输入上方,只需将&lt;small&gt;...&lt;/small&gt; 的位置更改为输入上方即可:

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

【讨论】:

【参考方案2】:

将帮助块类元素添加到控件

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

【讨论】:

我正在寻找标签(“前置文本”)和要对齐的输入字段,帮助文本(“这里有一些帮助文本”)就在输入字段的上方。我已经找到了一种使用额外的单独 div 的方法,但我很好奇是否有一种方法可以使用 Bootstrap 更简单地做到这一点

以上是关于如何在 Twitter Bootstrap 中在输入上方而不是下方添加帮助文本的主要内容,如果未能解决你的问题,请参考以下文章

如何让 twitter-bootstrap 导航栏子项在小屏幕上折叠/展开?

如何在 twitter-bootstrap-3 模态框中使用复选框

如何使用 Twitter Bootstrap 自动关闭警报

如何在 IE 中覆盖 Twitter Bootstrap 下拉悬停

如何在 twitter-bootstrap 模式窗口中插入 django 表单?

如何将 twitter bootstrap modal 设置得越来越宽?