表单控件组的bootstrap水平对齐(bootstrap horizontal alignment of form control groups)

表单控件组的bootstrap水平对齐(bootstrap horizontal alignment of form control groups)

我有两个带标签的表单控件。 我希望标签显示在控件上方，但控件显示在彼此旁边。 我可以弄清楚如何做一个或另一个，但不是两个。

我现在有

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

jsfiddle是http://jsfiddle.net/BA4g7/

如何使两个控制组水平对齐？ 我需要将它们连成一排吗？

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/

How can I make the two control groups horizontally aligned with each other? Do I need to put them in a row?

最满意答案

这看起来没问题 ：

.control-group { display: inline-block; vertical-align: top; }

但是，如果你希望它保证在线（而不是用窄屏幕宽度包裹），那么你需要将它包装在另一个div并设置white-space: nowrap ， 就像这个例子一样 。

此外，如果你想要它看起来更好，你需要在文本输入上使用一些尺寸标注， 这样的东西在我的FF浏览器中看起来很好 ：

#text1 { height: 20px; padding: 4px 0; }

This looks okay:

.control-group { display: inline-block; vertical-align: top; }

However, if you want it to be guaranteed to stay on line (and not wrap down with narrow screen widths), then you need to wrap it in another div and set white-space: nowrap on that, like this example.

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:

#text1 { height: 20px; padding: 4px 0; }