Twitter Bootstrap - 两列布局，表单未正确对齐

Question

我试过这个Twitter Bootstrap - Two Column layout for <form>

我有以下代码：

I have the following code 

 <div class="row">
        <div class="col-xs-6">
            I’m on the left
                    <div>
                        fruits:
                    </div>
            <select class="form-control">
                <option value="1">Apple</option>
                <option value="2">orange</option>
            </select>
        </div>
        <div class="col-xs-6">
            I’m on the right
                 <div>
                     fruits:
                 </div>
            <select class="form-control">
                <option value="1">Apple</option>
                <option value="2">orange</option>
            </select>
        </div>
    </div>

，输出类似于

但我希望DropDown位于“水果”的右侧，而不是低于此水平。 我错过了什么吗？我尝试了col-xs-6和col-lg-6。

Answer 1

您的标签“fruits”位于div中，这是一个块元素 - 这意味着它将占据整个宽度，因此您可能希望select低于此值。你想要做的是查看Bootstrap中的“形式水平”类。

这样的事情：

<form class="form-horizontal" role="form">

  <div class="form-group">
    <label class="col-sm-2 control-label">Fruits</label>
    <div class="col-sm-4">
      <select class="form-control">
        <option value="1">Apple</option>
        <option value="2">orange</option>
      </select>
    </div>
    <label class="col-sm-2 control-label">Fruits</label>
    <div class="col-sm-4">
      <select class="form-control">
        <option value="1">Apple</option>
        <option value="2">orange</option>
      </select>
    </div>
  </div>
</form>

请注意，网格可以采用一些方法 - 这只是一种方法。

Answer 2

我调整了您的HTML，请看一下。

<强> Working Demo

HTML

<form class="form-horizontal" role="form">
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                <div>
                    I’m on the left
                </div>
                <label for="inputEmail3" class="col-sm-2 control-label">fruits:</label>
                <div class="col-sm-10">
                    <select class="form-control">
                        <option value="1">Apple</option>
                        <option value="2">orange</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <div>
                    I’m on the left
                </div>
                <label for="inputEmail3" class="col-sm-2 control-label">fruits:</label>
                <div class="col-sm-10">
                    <select class="form-control">
                        <option value="1">Apple</option>
                        <option value="2">orange</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</form>

一些额外的CSS

.form-horizontal .control-label {
text-align: left;
  padding-left:0;
}

.form-horizontal .form-group {
margin: 0;
}