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

Question

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

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

如果你看一下Example Mobile and Desktop布局的Bootstrap 3的文档，它们会显示第一行的.col-xs-*类，总共18个列单位。

是什么给出的？怎么会这样？文档是错的吗？

谢谢

Answer 1

Bootstrap是一个12列的删除，但你可以连续放置12列以上。其余列将简单地换到下面的下一行，具体取决于视口。

在此示例中，在“md”视口（≥992px）上，内容总共将跨越12列（8 + 4）。但是在“xs”（＆lt; 768px）上，内容将跨越18列，将有一个完整行（12列），然后在它下面半行（6列）。

<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能够随时获取此信息，或者打开控制台并运行此代码段：

  

Math.max（document.documentElement.clientWidth，window.innerWidth || 0）

---

从视口开始＆gt; 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>

可以 强制新行，如果总和＆gt; 12.这样您就不必为不同的断点提供多种不同的标记模板。他们是导游。

Answer 3

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

例如，以下类：

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

将在md-width显示中生成一行，但在xs-width上显示一行半。 这仅仅意味着在小型显示器上，这些元素不会并排显示，而是相互叠加。