html - 如何使用Bootstrap 3创建2列，带有前面标签的4控件，并按列顺序保持标记

我想创建以下布局，将其放置在容器<div class='my-container'>中，该容器可以位于页面的任何位置：

label1:    [input1]     label3: [input3]
label2:    [x]          label4: [input4]

（请注意，这些输入不在表单内，它们是筛选器，并且处理客户端更改事件以响应用户输入。我不知道这是否重要，仅提供详细信息。）

我知道我可以使用<div class'row'>分隔表单行。

我更喜欢看到我的html代码按列排序（相对于按行排序），因为表单中的业务逻辑也是按列排序。我的意思是：

<markup for label1>
<markup for input1>
<markup for label2>
<markup for input2>
<markup for label3>
<markup for input3>
<markup for label4>
<markup for input4>

可选地，我想同时控制标签列布局的宽度和输入元素的宽度。

最佳答案

除非我对您的要求有误解，否则您是要使用“页面下”布局，而不是“左右-左右-左右”布局吗？

您可以嵌套行以使标记保持相同的顺序：

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="row">
                <label for="input-1" class="label-1 col-xs-6">Label 1</label>
                <input type="text" class="input-1 col-xs-6" />
            </div>
            <div class="row">
                <label for="input-2" class="label-2 col-xs-6">Label 2</label>
                <input type="text" class="input-2 col-xs-6" />
            </div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <label for="input-3" class="label-3 col-xs-6">Label 3</label>
                <input type="text" class="input-3 col-xs-6" />
            </div>
            <div class="row">
                <label for="input-4" class="label-4 col-xs-6">Label 4</label>
                <input type="text" class="input-4 col-xs-6" />
            </div>
        </div>
    </div>
</div>

看到这里：https://jsfiddle.net/96pd1ung/