twitter-bootstrap - 为什么列的总和超过 12？

Question

在 twitter bootstrap 3 中，网格中的最大列数是 12。我不明白为什么在官方文档中有这个例子超过了 18: http://getbootstrap.com/css/#grid-example-mixed

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

Answer 1

答案是因为总行数超过 12 的行将换行，允许在移动设备上显示不同的内容。您使用 col-xs 类来指定屏幕的哪一部分用于移动尺寸，如果超过 12 行，则创建额外的行，无论是否存在标记。

您可以通过在演示页面上调整浏览器大小来查看。具体查看移动设备、平板电脑、台式机和响应式重置示例:

http://getbootstrap.com/css/#grid-responsive-resets

http://getbootstrap.com/css/#grid-example-mixed-complete