此篇會針對隔線系統 container → row → col 以及 gutter 與 padding 的關係。

如何計算 container 寬度

• 每一個 col 都有左右 padding 15（格線系統的特性）。
• 設計稿中的 1110 = 30 * 11 + 65 * 12 是不包含第一個元素左邊的 gutter 以及最後一個元素右邊的 gutter（影片中在設計稿開啟格線系統也可以看到是切齊第一個和最後一個元素）所以寬度才會是 1110。
• 但 row 的寬度計算為 1140 = 65 * 12 + 30*12。

因此如果沒有將 container 寬度改為 1140px （1110 + 30 左右兩邊 gutter）則會子層 row 寬度則會超出父層。

為什麼需要 padding: 0 15px;

若 container 設置為 1140px，但沒有設置 padding 的話會發生有因為原有 row 推的負數 margin-left、margin-right 導致沒有正確排列（會發覺 col 元素顯示就不正確）

因此在有設置 box-model 的情況下，只需要添加 padding: 0 15px; 即可 ，因為 box-model 會自動計算將 1140-30 = 1110px 作為內容的寬度。（抵銷掉負數 margin後就會剛好符合設計稿的格線系統，且 container 寬度也剛好為 row 的寬度）

Boostrap 演示

e.g. BS 官方範例來演示 row 的寬度 > 父層 container 寬度。

• 透過 container padding 註解掉來演示這個問題，（圖左）container 寬度 770.8 小於（圖右）row 寬度 786.8。（官方預設 gutter 為 16）

為什麼 row 要有負數 margin？

是為了符合格線系統，像是設計稿開啟格線系統是切齊第一個和最後一個元素，所以就是透過推負數 margin 把第一個左邊 padding 和最後一個元素右邊 padding 移掉。

conclusion

container 寬度要加上左右兩邊 gutter，並加上 padding 來將 row推的負數 margin 補回來。