栅格选项 通过下面的表格可以详细查看栅格系统如何在多种不同屏幕大小的设备上工作的。
| 超小屏幕 手机 (<480px) | 小屏幕 平板 (≥480px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | 大屏幕 大桌面显示器 (≥1600px) | |
|---|---|---|---|---|---|---|
| 栅格系统行为 | 总是垂直排列 | 开始是堆叠在一起的，当大于阈值时将变为水平排列 | ||||
.container 最大宽度 |
None（自动） | 606px | 750px | 970px | 1170px | 1310px |
| 类前缀 |
.col-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
.col-xl-
|
.col-xxl-
|
| 列数 | 12 | |||||
| 最大列宽 | 自动 | ~50px | ~62px | ~81px | ~97px | ~109px |
| 槽宽 | 24px （每列左右均有 12px 的 padding） | |||||
| 可嵌套 | 是 | |||||
| 偏移 | 是 | |||||
| 列排序 | 是 | |||||
从堆叠到水平排列
使用单一的一组
.col-lg-*
栅格，您就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。将列放置于任何
.row 元素内即可。
移动设备和桌面浏览器
如果您不希望在小屏幕设备上所有列都堆叠在一起，可以使用针对超小屏幕和中等屏幕设备所定义的
.col-sm-*、
.col-lg-* 。
列包裹
如果一行中超过了12列，超出的列将换到下一行。
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new divne as one contiguous unit.
Subsequent columns continue along the new divne.
响应列重置
即便有上面给出的四组栅格 class ，你可能仍然会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用
.clearfix 和响应式工具的类
请调整浏览器窗口大小或在手机上查看该示例
列偏移
使用
.offset-lg-* 可以将列向右偏移。这些类通过使用
* 选择器将所有列增加了列的左侧 margin。例如
.offset-lg-4 将
.col-lg-4 向右移动了4个列的宽度。
列嵌套
为了使用内置的栅格将内容嵌套，通过添加一个新的
.row 和一系列
.col-md-* 列到已经存在的
.col-md-* 列内即可实现。嵌套
row 所包含的列加起来应该等于12。
列排序
通过使用
.col-lg-push-* 和
.col-lg-pull-* 可以轻松改变列的顺序。
等比例列
2列
-
50%
-
50%
3列
-
33%
-
33%
-
33%
4列
-
25%
-
25%
-
25%
-
25%
5列
-
20%
-
20%
-
20%
-
20%
-
20%
6列
-
16.6%
-
16.6%
-
16.6%
-
16.6%
-
16.6%
-
16.6%
等比例列的复杂应用
不同大小
当列具有不同大小时的示例
-
20%
-
20%
-
20%
-
20%
-
20%
-
20%
-
20%
-
20%
-
20%
-
20%
响应式
只需在列元素上添加
.blocks-sm-* ，
.blocks-md-* ，
.blocks-lg-* ，就可以轻松实现响应式。
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12