bootstrap grid 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>

我在自举网格中读过,网格应该完全等于12列.但是在引导网站本身的网格示例中,他们已经提到了上面的代码.. 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

如果在一行中放置超过12列,则每组额外列将作为一个单元包裹到新行上.

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