不同高度的3-2列

Question

我正在尝试使用Bootstrap 3创建一个特定的布局，我可以很容易地用直接的CSS/HTML来完成这个任务，但是如果可能的话，我想坚持使用Bootstrap类。我在同一页上还有其他标签和字段。

+---------+-------------+
| Label   |  Textbox    |    <--- Exist and are fine
+---------+-------------+

+---------+-------------+-------------------+
| Label   |  Textbox    | This is multiline |
+---------+-------------+ column that will  |    <--- STUMPED!
                        | contain text and  |
+---------+-------------+ need to be        |
| Label   |  Textbox    | responsive-fluid  |
+---------+-------------+-------------------+

现有的表单字段显示在下面的代码中，我想将这些代码集成到上面的多列/多行布局中：

<div class="form-group">
    <label for="Name" class="col-md-3 control-label">Name</label>
    <div class="col-md-9">
        <input type="text" value="Value" name="Name" id="Name" class="form-control">
    </div>
</div>

我尝试过很多不同的布局和引导类(推，拉.)但不管我做什么我都会弄得很乱。我将如何完成这个布局使用引导3？

Answer 1

你可以一排排做两个容器，如下所示：小提琴

这是代码：

<div class="form-group">
    <label for="Name" class="col-xs-3 control-label">Name</label>
    <div class="col-xs-9">
        <input type="text" value="Value" name="Name" id="Name" class="form-control"/>
    </div>
</div>
<div class="container col-xs-6">
        <label for="Name" class="col-xs-3 control-label">Name</label>
    <div class="col-xs-9">
        <input type="text" value="Value" name="Name" id="Name" class="form-control"/>
    </div>
            <label for="Name" class="col-xs-3 control-label">Name</label>
    <div class="col-xs-9">
        <input type="text" value="Value" name="Name" id="Name" class="form-control"/>
    </div>
            <label for="Name" class="col-xs-3 control-label">Name</label>
    <div class="col-xs-9">
        <input type="text" value="Value" name="Name" id="Name" class="form-control"/>
    </div>
</div>

<div class="container">
    <p>This is multiline column that will contain text and need to be responsive-fluid.</p>
</div>