CSS 表单控制组的引导水平对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17241817/
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 horizontal alignment of form control groups
提问by Jeff Storey
I have two form controls with labels. I want the labels to appear above the controls but the controls to appear next to each other. I can figure out how to do one or the other, but not both.
我有两个带标签的表单控件。我希望标签出现在控件上方，但控件彼此相邻。我可以弄清楚如何做一个或另一个，但不能同时做。
I currently have
我目前有
<div class="control-group">
<label class="control-label" for="select1">Select1</label>
<div class="controls">
<select id="select1">
<option value="abc">ABC</option>
<option value="def">DEF</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="text1">Text1</label>
<div class="controls">
<input id="text1"/>
</div>
</div>
The jsfiddle is http://jsfiddle.net/BA4g7/
jsfiddle 是http://jsfiddle.net/BA4g7/
How can I make the two control groups horizontally aligned with each other? Do I need to put them in a row?
如何使两个控制组彼此水平对齐？我需要把它们排成一排吗？
回答by ScottS
.control-group {
display: inline-block;
vertical-align: top;
}
However, if you want it to be guaranteedto stay on line (and not wrap down with narrow screen widths), then you need to wrap it in another divand set white-space: nowrapon that, like this example.
但是，如果您希望保证它保持在线状态（而不是用窄的屏幕宽度包裹），那么您需要将它包裹在另一个中div并设置white-space: nowrap在它上面，就像这个例子一样。
Also, if you want it to look better, you will need to play with some dimensioning on the text input, something like this looks good in my FF browser:
另外，如果你想让它看起来更好，你需要在文本输入上调整一些尺寸，这样的东西在我的 FF 浏览器中看起来不错：
#text1 {
height: 20px;
padding: 4px 0;
}
回答by rpasianotto
I think the best way is to add a custom css class in your external css that are loaded after bootstrap, for overwrite native class that you might want to change. Personally I do this every time I use bootstrap.
我认为最好的方法是在引导后加载的外部 css 中添加自定义 css 类，以覆盖您可能想要更改的本机类。我个人每次使用引导程序时都会这样做。
So I create this class to fix the problem
所以我创建了这个类来解决这个问题
.makeHorizontal{
float:left;
padding-left:20px;
}
Live demo here.
现场演示在这里。
