Html 如何在 Twitter Bootstrap 中在输入上方而不是下方添加帮助文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11840709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add help-text above input rather than below it in Twitter Bootstrap
提问by goelv
In creating forms using Twitter Bootstrap, how do you add help text abovethe input rather than below it. When I insert a statement above the input using the "help-block" class, the label and the input no longer align. Is there a way around that?
在使用 Twitter Bootstrap 创建表单时，如何在输入上方而不是下方添加帮助文本。当我使用“help-block”类在输入上方插入一条语句时，标签和输入不再对齐。有没有办法解决这个问题？
回答by Shabnam K
Prepend help-block class element to controls
将帮助块类元素添加到控件
<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>
Instead of appending
而不是附加
<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>
回答by Marcel Kohls
The bootstrap already have this kind of resource on it′s css class. Take a look on the samples (http://v4-alpha.getbootstrap.com/components/forms/).
引导程序已经在它的 css 类上有这种资源。查看示例 ( http://v4-alpha.getbootstrap.com/components/forms/)。
Your code must be on a form-group class, like this:
您的代码必须在表单组类上，如下所示：
<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>
And, if you need to put the help text above the input, just change the place of the <small>...</small>to the above of the input:
而且，如果您需要将帮助文本放在输入上方，只需将 的位置更改<small>...</small>为输入上方：
<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>
