看如何在多个设备上使用一个方便的表,引导网格系统工作的方面。
| 超小型装置 Phones (<768px) | 小装置 Tablets (≥768px) | 中等设备 Desktops (≥992px) | 大型设备 Desktops (≥1200px) | |
|---|---|---|---|---|
| 网格行为 | 水平在任何时候 | 崩溃的开始,水平以上的断点 | ||
| 最大网格宽度 | None (auto) | 750px | 970px | 1170px |
| 样式类前缀 |
.col-xs-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
| # 列 | 12 | |||
| 最大单元格宽 | Auto | 60px | 78px | 95px |
| 网格线宽 | 30px (15px on each side of a column) | |||
| 嵌套 | Yes | |||
| 偏移 | Yes | |||
| 列排序 | Yes | |||
网格类适用于具有屏幕宽度大于或等于断点大小的设备,并覆盖在较小的设备上的网格类。因此,应用任何
.col-md- 类到一个元素将不仅影响其造型在中等设备,但也对大型设备,如果
.col-lg- 类不存在。
有了四层网格,你必然会遇到一些问题,在某些地方,你的专栏并不清楚,因为一个比另一个更高。要解决这个问题,使用一个组合
.clearfix 我们的响应实用类.