CSS Bootstrap 如何获得帮助块以处理内联和水平表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17178160/
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
Bootstrap how to get help-block to work with inline and horizontal forms
提问by R_Marlatt
I would like to setup a form using the Bootstrap form-horizontal layout with the controls in an inline layout while still being able to have the help-block text below each field.
我想使用 Bootstrap 表单水平布局和内联布局中的控件设置表单，同时仍然能够在每个字段下方显示帮助块文本。
I have been able to accomplish the desired layout using the code below.
我已经能够使用下面的代码完成所需的布局。
<form class="form-horizontal">
<div class="control-group">
<span class="control-label">Name</span>
<div class="controls form-inline">
<input type="text" class="input-large" placeholder="First" id="FirstName">
<input type="text" class="input-mini" placeholder="M.I." id="FirstName">
<input type="text" class="input-large" placeholder="Last" id="LastName">
</div>
</div>
</form>
However I would like to be able to add the help-block class to each field as shown below:
但是，我希望能够将 help-block 类添加到每个字段，如下所示：
<input type="text" id="FirstName" class="input-large" >
<p class="help-block">First Name</p>
Example of what I am looking for:
我正在寻找的示例：
Any suggestions?
有什么建议？
采纳答案by Pigueiras
I don't believe there is a way to do with Bootstrap, but you can do it with an extra markup and a little of CSS.
我不相信有办法使用 Bootstrap，但是您可以使用额外的标记和一些 CSS 来实现。
Demo: http://bootply.com/64777
HTML:
HTML：
<form>
<div class="control-group">
<label class="control-label">Name</label>
<div class="my-special-form">
<div>
<input type="text" class="input-large" placeholder="First" id="FirstName">
<p class="help-block">First Name</p>
</div>
<div>
<input type="text" class="input-mini" placeholder="M.I." id="FirstName">
<p class="help-block">M.I</p>
</div>
<div>
<input type="text" class="input-large" placeholder="Last" id="LastName">
<p class="help-block">Last</p>
</div>
</div>
</div>
</form>
CSS:
CSS：
.my-special-form div {
float: left;
}
回答by Jonas Stensved
Since boostrap3it's supported to use .rowand .col-classes to control forms appearance.
因为boostrap3它支持使用.row和.col-classes 来控制表单外观。
This gives you better control on various screen sizes than a horizontal form does. Please have a look at http://getbootstrap.com/css/#forms-control-sizes
与水平表单相比，这使您可以更好地控制各种屏幕尺寸。请看一下http://getbootstrap.com/css/#forms-control-sizes
With the provided example from Boostrap3 you might solve it like this inside your form (without .form-inline).
使用 Boostrap3 提供的示例，您可以在表单中像这样解决它（没有.form-inline）。
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
<p class="help-block">First Name</p>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
<p class="help-block">M.I</p>
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
<p class="help-block">Last</p>
</div>
</div>
回答by Jonas Stensved
CSS (overriding some classes from bootstrap)
CSS（覆盖引导程序中的某些类）
.help-block{line-height:0px;}
.controls{display:inline-block;vertical-align:top;}
unfortunately, in small screen the control div blocks wide lenght of input
不幸的是，在小屏幕中，控制 div 阻止了宽输入
