Sass教學-格線系統
格線系統說明： 格線系統一開始是從平面設計衍生出來，目的是為了讓排版版面看起來更為整齊、美觀。 而網頁部分則是因為早期電腦螢幕通常都是1024px， 故早期設計上都以960px為主 。 欄數部分以12欄為主流(因為可以切分出較多組公倍數)。 接著我們來看一下網格系統吧! 下面這張圖是sketch 設定畫面 說明： 1.圖片中設定的Total width明明就是960px，但為何實際寬度只有940px呢? 原因出在，此格線系統有一個Gutter on outside(共20px)，而通常這部分都是設定在container上 (此案例的話是推padding-left:10px padding-right:10px) 補充：為何要有gutter on outside出現呢? 回答連結 簡單來說就是為了讓畫面不那麼擁擠，可以讓閱聽者閱讀上更加舒適 介紹完格線系統後，接著我們來想想上面的Gutter是怎麼產生呢? 你第一個想到應該會使用padding或margin來推擠吧!沒錯Bootstrap也是由 在column上使用padding來推擠 如下圖 但在column上加上padding推擠後會造成畫面往內縮(畫面不一致)，所以還要在row上加上margin將推擠回補 最後在行動版上， 若沒有在container上加一層padding推擠會無法產生兩邊相同間距(也會出現X軸可以水平移動) 如下圖 程式碼： // container拿掉padding .container { max-width: 960px; margin: 0 auto; // padding-left: ($gutter-width/2); // padding-right: ($gutter-width/2); } 但，如果補回padding值，左右就會保留一定寬度 // container拿掉padding .container { max-width: 960px; margi...