container:用.container包裹的内容即可实现居中对齐。注意,由于在各分辨率下面都设置了padding 和 固定宽度,.container不能嵌套。
row:栏栅系统是把父容器平均分为12列。注意,row可以被嵌套。
通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。
超小屏幕设备 手机 (<768px) | 小屏幕设备 平板 (≥768px) | 中等屏幕设备 桌面 (≥992px) | 大屏幕设备 桌面 (≥1200px) | |
---|---|---|---|---|
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,超过这些阈值将变为水平排列 | ||
最大.container宽度 | None (自动) | 750px | 970px | 1170px |
class前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列数 | 12 | |||
最大列宽 | 自动 | 60px | 78px | 95px |
槽宽 | 30px (每列左右均有15px) | |||
可嵌套 | Yes | |||
偏移(Offsets) | Yes | |||
列排序 | Yes |