css - Bootstrap 3，这是如何指定网格布局的？

Question

我正在使用表单生成器。它呈现了以下语法。我相信 bootstrap 3 使用的列系统必须加起来为 12。我从下面看到它加起来只有 10。有人可以解释为什么下面是正确的。也许我只是困惑...

<!-- Contact Info -->
      <div class="tab-pane fade active in" id="contactinfo1">
          <br>

          <form class="form-horizontal">
          <fieldset>



          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label" for="firstname">First Name</label>  

            <div class="col-md-6">
            <input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control input-md">  
            </div>
          </div>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label" for="lastname">Last Name</label>  
            <div class="col-md-6">
            <input id="lastname" name="lastname" type="text" placeholder="Last Name" class="form-control input-md" required="">

            </div>
          </div>

Answer 1

在 Twitter Bootstrap 中，你可以添加“最多 12”列，这意味着你可以包含不超过 12 列，但你可以包含少于 12 列或实际上 12 列(没有硬性规定，只能是 12 列)。col-md-6 和 col-md-4 添加到 10 个列。因此，现在您可以根据需要添加“col-md-2”(不是必需的)，这将与初始 DIV“col-md-4”和“col-md-6”位于同一行。但是，如果您在“col-md-2”之上添加任何内容，即“col-md-3”，它将被移至下方。希望这对您有所帮助。