烦人的自举水平对齐

Question

我有一个表单，我希望在同一行中保留2或3个控件，例如：

label1

r1_ctrl1 r1_ctrl2 r1_ctrl3

label2 

r2_ctrl1 r2_ctrl2 r2_ctrl3

我试着这样做：

<form class="form-horizontal" role="form">
<label...>
<div class="form-group">
<select .../>
<a ... />
</div>
</form>

它不起作用。 我也尝试过：

<form class="form-horizontal" role="form">
<label...>
<div class="form-group"> 
<div class="controls form-inline"
<select .../>
<a ... />
</div>
</div>
</form>

也没有结果。 唯一的工作方法是Html表，但结果真的很难看。请指教。

Answer 1

如果你想在同一行控制你不应该使用：
.form-horizontal
但
.form-inline

http://getbootstrap.com/css/#forms-inline

这是.form-horizontal的作用：

  

单个表单控件自动接收一些全局样式。所有textual，和.form-control元素都设置为width：100％;默认情况下。在.form-group中包装标签和控件以获得最佳间距。

这就是.form-inline的作用：

  

为左对齐和内联块控件添加.form-inline。这仅适用于视口中至少为768像素宽的表单。

Answer 2

我会利用Bootstrap的灵活网格布局：

<div class="row">
    <form>
        <div class="col-xs-12">
            <h3>Heading 1</h3>
        </div>
        <div class="col-xs-4 form-group">
            <label for="input1">
                <input id="input1" class="form-control" value="Control 1"></input>
            </label>
        </div>
        <div class="col-xs-4 form-group">
            <label for="input2">
                <input id="input2" class="form-control" value="Control 2"></input>
            </label>
        </div>
        <div class="col-xs-4 form-group">
            <label for="input3">
                <input id="input3" class="form-control" value="Control 3"></input>
            </label>
        </div>
    </form>
</div>

Demo

请注意，我已将您的标签更改为标题。每个输入都应该有自己的标签（具有适当的for属性）以实现可访问性。在此演示中，for属性并非严格必要，因为标签会包含输入。