Bootstrap 3 和 .col-xs-*——你不需要 12 个单元的行吗？

Question

我对 Bootstrap 3 文档以及 .col-xs-* 类的使用感到有些困惑。

Grid Options 的文档说所有网格系统都使用 12 列。

如果您查看 Bootstrap 3 的文档以了解 Example Mobile and Desktop 布局，它们会显示第一行的 .col-xs-* 类，总计 18 个列单元。

什么给了？怎么会这样？文档有误吗？

谢谢

Answer 1

Bootstrap 摆脱了 12 列，但您可以在一行中放置超过 12 列。剩余的列将简单地换行到下面的下一行，具体取决于视口。

在本例中，在“md”视口 (≥992px) 上，内容将跨越 12 列 (8 + 4)。但在 "xs" (

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

md...

|    8   |  4 |

xs...

|     12     |
|   6  |  

编辑：如果您遇到任何列未正确换行的问题，请务必查看文档的 Responsive Column Reset 部分。

Answer 2

更多地从使用相同标记的lg、md、sm 和xs（或具体的断点）的不同网格来考虑网格布局。打开一些浏览器实例和网格布局示例可能会有所帮助。关注this fiddle，或者这个标记：

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

您需要知道视口的宽度（以像素为单位），因此请考虑使用browser plugin 来提供此信息，或者打开控制台并运行此 sn-p：

Math.max(document.documentElement.clientWidth, window.innerWidth || 0)

---

从 > 1200 像素的视口开始：

由于断点，实际列由col-lg-* 类决定。这将为该断点创建一个网格。

现在看看另外两个断点，col-sm-* 和 col-xs-*。

col-sm-* 生效：

col-xs-* 生效：

断点允许您根据大小创建一个全新的网格。因此，理论上，这些行充当“严格”的新行，其中 col 数字就像

<div class='col-xs-12'>col-xs-12</div>
<div class='col-xs-12'>col-xs-12</div>

可以在总和 > 12 时强制生成新行。这样您就不必为不同的断点使用无数不同的标记模板。他们是向导。

Answer 3

一列占用的行数是类的最后一个数。

例如，以下这些类：

.col-xs-12 .col-md-8  
.col-xs-6 .col-md-4

将在 md 宽度显示器上显示一行，但在 xs 宽度显示器上显示一行半。
这仅仅意味着在小型显示器上，这些元素不会并排显示，而是彼此叠加显示。