css - Bootstrap 3 - 列的划分

Question

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

在第一行中，我有一个水平形式的标签/文本框。示例如下所示。

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

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

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

您将不得不使用类“行”使其成为 col-6 格。

<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/ , 嵌套列部分