Bootstrap 3 - 不同高度的列

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

U可以使两个容器中，在一排，像这样：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>