为什么我需要一个 12 列宽的表格来完成 col-xs-8 列？答案

【问题标题】：Why I need a 12 columns width form to fulfill a col-xs-8 column?为什么我需要一个 12 列宽的表格来完成 col-xs-8 列？
【发布时间】：2015-02-12 09:23:21
【问题描述】：

我正在努力将“总共 12 列”清楚地记在脑海中

我有一个简单的 2-8-2 行，中间 div 有一个表格。

我使用的是经典的形式-水平形式。

对于 col-xs-8 div，我认为子行的总宽度必须是 8，col-xs-2 和 col-xs-6。

但它不能满足我的父 div。

通过对 col-xs-2 + col-xs-10 实现我的 col-xs-8 父 div。

所以将 12 宽度转换为 8 是正确的，但将 8 转换为 8 宽度的父对象是错误的？没看懂，可能是我对bootstrap的网格系统理解有误

我有一个 plunker 来显示这两个表格。

http://plnkr.co/edit/toWeoV3cQna02IyzQLnF?p=preview

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="content" class="container">
  <div class="row">
    <h1>MENU</h1>
  </div>
  <div class="row">
    <div class="col-xs-2">
      LEFT COL
    </div>
    <div class="col-xs-8">
      MIDLE
      <form class="form-horizontal">
        <legend>form with 12 colums in 8</legend>
        <div class="form-group">
          <label class="col-xs-2 control-label">Label1</label>
          <input type="text" class="col-xs-10" value="expends to 100%">
        </div>
      </form>
      <hr>
      <form class="form-horizontal">
        <legend>form with 8 colums in 8</legend>
        <div class="form-group">
          <label class="col-xs-2 control-label">Label1</label>
          <input type="text" class="col-xs-6" value="Doesn't expend 100%">
        </div>
      </form>
    </div>
    <div class="col-xs-2">
      RIGHT COL
    </div>
  </div>
</div>

我错过了什么？

正确的解释来自 ckuijjer

在最初的 .col-xs-8 中，它定义了 12 列宽中的 8 列。使用 .form-group 它在此列内嵌套一个新网格。此嵌套网格还包含 12 列小于父网格中的列

【问题讨论】：

标签： forms twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果您通过添加另一个 .row 或 .form-group 来嵌套 Bootstrap 的网格，则嵌套列应该再次加起来为 12。有关一些背景信息，请参阅 http://getbootstrap.com/css/#grid-nesting。

【讨论】：

那么，如果我有一个很好的理解，我必须添加 12 列每行？如果我不使用.row，是否会根据列数进行堆叠？一组 24 列宽的会堆成 2 行吗？
使用最初的.col-xs-8，您定义了一个宽度为 12 列中的 8 列的列。使用.form-group，您可以在此列中嵌套一个新网格。此嵌套网格还包含 12 列，比父网格中的列小。
谢谢，你的解释很清楚。我把它放在帖子描述中以帮助人们。