Question

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

我目前有

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

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

Answer 1

This looks okay：

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

但是，如果您希望保证保持在线（而不是用窄屏幕宽度包裹），那么您需要将其包装在另一个div中并设置{ {1}}，like this example。

此外，如果您希望它看起来更好，您需要在文字输入上使用一些尺寸标注something like this looks good in my FF browser：

white-space: nowrap

Answer 2

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

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

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

现场演示here。

表单控件组的bootstrap水平对齐

2 个答案: