1 .网格系统的几个问题1.1 gutter是什么？ body id=' row-container ' style=' margin :0 auto； 边距-左：200 px； border:1px solid blue； 位置： absolute；' divid=' row ' style=' background : # CCC； height:100px； border:1px solid red； display :联机块；' div style='height:100px； width:500px； display :联机块；' /div /div/body执行上述代码时，会显示子元素div#row的边距-左边缘：-10px； 边距-右：-10px； 时，子元素在左侧和右侧都超过了父元素10px。
分析一下网格系统的原理吧。
其中，蓝色是Row的父元素，红色是Row。 如果将Row设置为gutter={16}，则可以看到Row元素在左侧和右侧超过了父元素8px。 此时，Col元素相对于Row的父元素，左侧和右侧紧密粘合在一起。 此时，Row的父元素和Row的子元素的位置正好是我们想要的。 Col之间的距离为16px。
1.2设置gutter后，元素的大小有变化吗？ 结果，设置gutter后，元素变小了。 以下是一个例子。
在设置gutter前后，我们的Row的父要素没有变化，都是563px。 如果未设置gutter，则行的宽度为561px，每col的宽度为563/4=140px。 设置gutter后，行的宽度为56116 (边距左和边距的负数增加了元素尺寸(=577px，col本身的宽度) 563-8*2*3) )/4=128 图请参阅上图。 所以设置gutter={16}后，col从原来的140变成了128。 注意：子元素的Col宽度计算为： [Row的父元素宽度-Gutter*(n-1 ) (n为Col的个数) ]/n
1.3使用offset设置中的值offset可以将列向右侧偏移。 例如，{1}offset={2}将元素向右偏移了四列{3}{4}的宽度。
1.4推和拉的设置可以通过使用推和拉类轻松更改列(column )的顺序。 push表示向左偏移了多少列，pull表示从右向左减去
参考资料：
在boostrap中为lg、md、sm和xs的768、992和1200
对Bootstrap网格系统的理解和总结
Bootstrap学习——网格系统
Bootstrap3.0网格系统背后的精妙魔法(Bootstrap3.0网格布局系统的实现原理) )。
全局CSS样式
由于长方体模型变成了border-box，添加gutter后要素本身的大小变小，padding变大