-表格不对齐的两列布局

Question

我试过这个Twitter引导-两列布局

我有以下代码：

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在“水果”的右边，而不是在“水果”下面。我是不是遗漏了什么？我试过-xs-6和头-lg-6。

Answer 1

您的标签，“成果”是在一个div，这是一个块元素-这意味着它将占据一个整体的宽度，所以你会期望选择在下面。您要做的是查看引导中的“窗体-水平”类。

就像这样：

<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，请看一下。

工作演示

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