7-2 Bootstrap排版

一、Bootstrap容器

1. 固定寬度：container
2. 100%寬度：container-fluid
3. .container-{breakpoint}, 直到指定斷點之前，都會是 width: 100%
   下表說明了每個容器的 max-width 與每個斷點處的原始 .container 和 .container-fluid 的比較。
   可以在實際操作中觀看它們，並在我們的網格範例中進行比較。

4. 	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
   .container	100%	540px	720px	960px	1140px	1320px
   .container-sm	100%	540px	720px	960px	1140px	1320px
   .container-md	100%	100%	720px	960px	1140px	1320px
   .container-lg	100%	100%	100%	960px	1140px	1320px
   .container-xl	100%	100%	100%	100%	1140px	1320px
   .container-xxl	100%	100%	100%	100%	100%	1320px
   .container-fluid	100%	100%	100%	100%	100%	100%

二、斷點

每個斷點主要是為了容納寬度為 12 倍數的容器。這些斷點也代表了常見尺寸以及可視區域—但它們並非專門針對每個設備。取而代之的是，這些範圍幾乎是所有設備基礎。