表单控制组的引导水平对齐答案

【问题标题】：bootstrap horizontal alignment of form control groups表单控制组的引导水平对齐
【发布时间】：2013-06-22 07:49:28
【问题描述】：

我有两个带有标签的表单控件。我希望标签出现在控件上方，但控件彼此相邻出现。我可以弄清楚如何做一个或另一个，但不能同时做。

我现在有

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

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

【问题讨论】：

标签： css twitter-bootstrap alignment

【解决方案1】：

This looks okay:

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

但是，如果您希望它保证保持在线（而不是用窄屏幕宽度包裹），那么您需要将它包裹在另一个 div 中并设置 white-space: nowrap对此，like this example。

另外，如果你想让它看起来更好，你需要在文本输入上调整一些尺寸，something like this looks good in my FF browser:

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

【讨论】：

【解决方案2】：

我认为最好的方法是在引导后加载的外部 css 中添加一个自定义 css 类，以覆盖您可能想要更改的本机类。我个人每次使用引导程序时都会这样做。

所以我创建了这个类来解决这个问题

.makeHorizontal{
  float:left;
  padding-left:20px;
}

现场演示here。

【讨论】：