container和container-fluid

使用

在Bootstrap中，這兩個Class是一樣的地位，是用來定義最外層容器的。

使用格線系統時，補上container或container-fluid，版面會規整，不會有多餘的padding或margin出現。

container-fluid

主要使用在滿版寬度。

會隨著版型寬度調整，適合用在不需要嚴謹的最大寬度版面使用。

container

常用在版面有最大寬度限制的時候。

有時候對網頁美感和內容的每個階段都有需求時，用container可以在斷點前維持同一版型，因為會隨著斷點才變動版面，所以很適合在版型有最大寬度限制時使用。

斷點

斷點分為五個階段：

1. 寬度 < 576px：版面隨視窗縮放變化
2. 768px > 寬度 ≥ 576pxf：會以540px為版面寬度
3. 992px > 寬度 ≥ 768px：會以720px為版面寬度
4. 1200px > 寬度 ≥ 992px：會以960px為版面寬度
5. 寬度 ≥ 1200px：會以1140px為版面寬度

row和col

row

包覆col的Class，一定要寫在一個段落，作為放置col容器的<div>上面，因為在設計格線系統時，就是設計row包覆col外，如果沒有遵守，會造成破版的現象。

col

為最內部的元件欄位，是column的縮寫，一般常說的兩欄式版面、三欄式版面，就是用col做為區隔<div>的Class。

要特別注意的是，因為Bootstrap是用padding作為欄與欄之間的間隔，所以不要在使用colClass的<div>上用padding-left、padding-right、margin-left、margin-right這些水平推移的CSS，以免造成破版。

在使用時，如果不給任何數字，單純的使用col，row會以當前row中col的數量來平分空間，形成均分的欄位排版。

如果要有大小欄差異的排版，在col後加上數字即可，範圍從1到12，分別代表該欄佔當下row幾等份，寫成col-數字。