响应式网格（栅格化）布局

1媒体查询

@media(min-width:769px){

.col-md-1{width:calc(8.333% - 20px);}

。。。

}

2calc计算 注意

可以将%，px混合使用。cale()里可以是表达式。但有一点注意。+-*/号的前后必须留有空格。否则识别不了，属性不会生效。

calc(8.333% - 20px);这里将子元素设为border-box。%指的是总共的宽度，包括左右留下的margin宽度。所以，实际宽度应该减去左右外边距的值。

3各个子元素间间距问题。

假设个元素间间隔为20px.因为子元素浮动，margin并不会合并。所以每个子元素的margin设为10px.这样就能保证中间的间隔都为20px,。但是最左边和最右边的元素左右间隔只有10px，所以再为父元素设置padding：10px;这样两端的间距也就变为20px。