Bootstrap 3 - 列的划分

Question

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

在第一行，我有横向表单的标签/文本框。下面是一个例子。

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

我意识到，当我使用 div.form-group 时，即使 div.form-group 在 div.col-md-6 内，我也有机会拥有新的 12 列。这是正确的吗？

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<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

你必须使用类 'row' 使其进入 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/，嵌套列部分