“这是我参与8月更文挑战的第26天，活动详情查看： 8月更文挑战”
前言
上一篇(传送门)我们一起学习了栅格系统的特点以及入门案例的分析。本篇我们继续学习栅格系统的屏幕尺寸和列偏移量的问题。
栅格系统
栅格系统的屏幕尺寸
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 | None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 |
屏幕尺寸简述:
- large : lg-------大屏幕，一般PC尺寸
- medium : md --------中等屏幕,小PC尺寸
- small:sm : sm -----小屏幕，iPad 尺寸
- x small : xs -----超小屏幕，智能手机尺寸
设置屏幕尺寸时的注意事项
若设置了某个屏幕尺寸的样式,那么比该尺寸大的屏幕,会沿用该设置; 比该尺寸小的屏幕，会默认一个元素占12列的设置。
例如:设置了col-md-4，那么相当于也设置了col-lg-4。 其他屏幕尺寸均默认为 col-sm-12,col-xs-12
栅格系统的列偏移量
通常情况下我们需要将元素居中显示,需要左边空出一定的空白区域,这里我们就可以使用列偏移来达到效果。
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-3" style="border: 1px solid red;">
我向右偏移了3个列的位置
</div>
</div>
</div>
写在最后
好了，以上就是栅格系统屏幕尺寸的一些设置和注意事项，以及栅格系统列偏移的使用，到此关于栅格系统我们就结束了，以上内容如有不正之处，欢迎掘友们批评指正。
