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

Question

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

网格选项的文档说所有网格系统都使用12列.

如果您查看Bootstrap 3的文档以获取示例移动和桌面布局,它们将显示第一行的.col-xs-*类总计18个列单位.

是什么赋予了？怎么会这样？文档错了吗？

谢谢

Answer 1

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

在此示例中,在"md"视口(≥992px)上,内容总共将跨越12列(8 + 4).但是在"xs"(<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  |  

编辑:如果您遇到列未正确包装的任何问题,请务必查看文档的" 响应列重置"部分.

Answer 2

更在不同的网格为各种规模的角度来考虑网格布局,lg,md,sm,和xs(或破发点要具体)使用相同的标记.打开一些浏览器实例和网格布局的示例可能会有所帮助.跟随这个小提琴,或这个标记:

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

您需要知道视口的宽度(以像素为单位),因此请考虑使用此信息的浏览器插件或打开控制台并运行此代码段:

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,则可以强制换行.这样就不必为不同的断点设置不同的标记模板.他们是向导.