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>

我尝试了很多不同的布局和Bootstrap类（推，拉......）但无论我尝试什么，我的定位都非常糟糕。如何使用Bootstrap 3完成此布局？

Answer 1

你可以连续制作2个容器，如下所示：jsfiddle

这是代码：

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

Bootstrap 3 - 2列不同的高度

1 个答案: