最终效果
概述
响应式设计的三要素：弹性栅格布局、媒体查询、响应式图片。
这是我写过的第三版浮动栅格布局了。 故事要从MDN的文章传统布局方法说起，里面介绍了960px、12栅格的布局方式，然后用百分比改进成弹性布局。skeleton是一个单纯的浮动栅格，它的间隔是用百分比margin，导致宽度计算起来更复杂了，而且扩展性不强。今天把bootstrap的栅格部分拿出来写了一遍，用两个字来形容：优雅！
要点分析
- border-box盒模型 百分比计算基于父元素content宽度计算。使用padding来间隔，子元素width包含padding，所以列宽100%/12，计算简单。而且行间距改变不会影响宽度计算，可拓展性强。
- 负margin 行row使用负margin抵消container的padding（表现为padding重叠）
- 媒体查询 bootstrap使用了4个断点：xs，sm，md，lg。所以我们可以很轻松地基于尺寸调整布局
- offset 使用margin-left实现
- pull，push col列相对定位，push百分比left，pull百分比right。用来改变顺序，类似flex里的order
- 做demo时发现，bootstrap是用vertical-align: middle清除图片的幽灵空白
- 问题 高度不一致时导致元素卡在中间。 等高不好处理（背景等高可以用-margin+padding实现-css世界）
