Question

假设我们有两行：
1行 col-md-12
1行，包含2个div，每个 col-md-6

在第一行中，我有一个表格水平方式的Label / Textbox。一个例子如下所示。

我的问题是，带有 form-group 类的div是否给了我一行宽12列？当我有行包括不同宽度的列时，如何对齐内容？例如，我需要将子按钮与文本框对齐，而不是标签。

我意识到当我使用div.form-group时，即使div.form-group位于div.col-md-6中，我也有机会获得新的12列。它是否正确？

<div class="row">
    <div class="col-xs-11 col-md-6">
        <div class="form-group">
            <label for="txtFirstName" class="control-label col-md-3 col-xs-3">First Name</label>
            <div class="col-md-7 col-xs-8">
                <input type="text" class="form-control" id="txtFirstName">
            </div>
        </div>
    </div>
    <div class="col-xs-11 col-md-6">
        <div class="form-group">
            <label for="txtLastName" class="control-label col-md-3 col-xs-3">Last Name</label>
            <div class="col-md-7 col-xs-8">
                <input type="text" class="form-control" id="txtLastName">
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-11 col-md-6">
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</div>

Answer 1

你必须使用课程＆＃39; row＆＃39;把它变成col-6 div。

<div class="col-xs-11 col-md-6">
    <div class="form-group">
        <div class="row">
           <div class="col-md-3 col-xs-3"> 
              <label for="txtFirstName" class="control-label">First Name</label>
           </div>
           <div class="col-md-7 col-xs-8">
             <input type="text" class="form-control" id="txtFirstName">
           </div>
        </div>
    </div>
</div>

检查http://getbootstrap.com/css/，嵌套列部分

Bootstrap 3 - 列的划分

1 个答案: