twitter-bootstrap - Bootstrap 网格 xs 变为 18 列而不是 12 列

Question

 <div class="row">
 <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
 <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>

我读过 Bootstrap 网格，网格应该完全等于 12 列。但是在 Bootstrap 站点本身的网格示例中，他们提到了上面的代码.. col-xs-12 和 col xs-6 等于 18 但不是 12。请澄清这种混淆。

Answer 1

您问题中的标记是“正确的”，但可能无法解释原因。基本上，如果您选择使用超过 12 列，则初始 12 之后的任何额外列都将换行到下一行。例如:

<div class="row">
  <div class="col-xs-12">...</div>
  <div class="col-xs-6">...</div>
</div>

将产生与以下类似的结果:

<div class="row">
  <div class="col-xs-12">...</div>
</div>
<div class="row">
  <div class="col-xs-6">...</div>
</div>

这两种方法都是允许的，但是当使用 row, columns, row, columns 时，您可以更好地控制页面的外观和样式。第二个例子中的方法。

在这里阅读更多: Bootstrap Column Wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>