1.柵格系統的一些問題
1.1 gutter是什麼?
<body id＝"row-container" style="margin:0 auto;margin-left:200px;border:1px solid blue;position: absolute;">
<div id="row" style="background: #ccc;height:100px;border:1px solid red;display: inline-block;">
<div style="height:100px;width:500px;display: inline-block;">
</div>
</div>
</body>運行上面的代碼你會發現，當子元素div#row的margin-left:-10px;margin-right:-10px;時候，子元素在左側和右側都超出了父元素10px!
我們下面來分析一下柵格系統的原理：
其中藍色的是Row的父元素，而紅色的是Row，你會發現當給Row設置了gutter={16}的時候Row元素在左側和右側超出了父元素8px。此時，Col元素相對於Row的父元素來說左側和右側是緊緊靠在一起的，此時Row的父元素和Row的子元素的位置正是我們想要的，Col之間的距離爲16px。
1.2 gutter設置後元素的大小有沒有變化?
結果是設置了gutter後元素變小了。下面是一個例子：
設置gutter前後我們的Row的父元素沒有發生變化，都是563px。未設置gutter時候 ,Row的寬度爲561px，每一個col的寬度爲563/4=140px。設置了gutter以後，Row的寬度爲561+16(margin-left和margin-right負數拉伸了元素大小)=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 可以將列向右側偏。例如，offset={4} 將元素向右側偏移了 4 個列（column）的寬度。
1.4 push和pull設置
通過使用 push 和 pull 類就可以很容易的改變列（column）的順序。push表示左偏多少列，而pull表示從右往左拉
參考資料：
boostrap中lg,md,sm,xs之768，992，1200
Bootstrap 柵格系統 理解與總結
Bootstrap學習——柵格系統
Bootstrap3.0 柵格系統背後的精妙魔法(Bootstrap3.0的柵格佈局系統實現原理)
全局 CSS 樣式
因爲盒模型變成了border-box,所以添加了gutter後元素本身的大小變小，padding變大了