Html 如何创建2列，4个控件，使用Bootstrap 3按列顺序保留标记

我想创建以下布局，它将被放置在一个容器

中，该容器可以位于页面的任何位置：

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

（请注意，这些输入不在表单中，它们是一个过滤工具，客户端更改事件被处理以响应用户输入。我不知道这是否重要，只提供详细信息。）

我知道我可以使用

分隔表单行

我更喜欢按列排序（而不是按行排序），因为表单中的业务逻辑也是按列排序的。我的意思是：

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

---

或者，我希望控制标签列布局宽度和输入元素宽度。

如果您能够操作标记，您可以利用

列计数

css属性来控制标签/输入项拆分的列数。因此，如果将标签/输入对包装在列表项中：

<div class="container">
    <ul>
        <li>
            <label for="input1">label1</label>
            <input type="text" name="input1" />
        </li>
        <li>
            <label for="input2">label2</label>
            <input type="text" name="input2" />
        </li>
        <li>
            <label for="input3">label3</label>
            <input type="text" name="input3" />
        </li>
        <li>
            <label for="input4">label4</label>
            <input type="text" name="input4" />
        </li>
    </ul>
</div>   

这是你的电话号码

。这是相当好的供应商前缀

---

希望这能有所帮助。

除非我误解了你的要求，否则你的意思是你只是想使用“向下页面”的布局，而不是“左-右”

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

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

标签1
标签2
标签3
标签4

---

请参见此处：

如果您构建一个JSFIDLE或codepen来开始使用，这将非常有用。要实现您想要的，您需要将标签和输入包装在一个容器中，即。

-您的要求允许吗？谢谢Tim，这是漫长的一天：）没问题。看起来好多了：）

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