網格
雖然 Bootstrap 使用 ems 或 rems 來定義大多數尺寸,但 pxs 用於網格斷點和容器寬度。這是因為視口寬度以像素為單位,不會隨字體大小而改變。
透過一個方便的表格,了解 Bootstrap 網格系統的各個方面如何在多個裝置上運作。 Bootstrap 網格
| 特小 <576px | 小 ≥576px | 中 ≥768px | 大 ≥992px | 特大 ≥1200px | |
|---|---|---|---|---|---|
| 網格行為 | 始終水平 | 預設摺疊,斷點以上水平 | |||
| 最大容器寬度 | 無 (自動) | 540px | 720px | 960px | 1140px |
| 類別前綴 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| 欄數 | 12 | ||||
| 間隙寬度 | 30px (每欄兩側 15px) | ||||
| 可巢狀 | 是 | ||||
| 偏移量 | 是 | ||||
| 欄位排序 | 是 | ||||
容器
容器是 Bootstrap 中最基本的佈局元素,在使用我們的預設網格系統時是必需的。您可以選擇響應式固定寬度容器(表示其最大寬度在每個斷點都會改變)或流式寬度容器(表示它始終為 100% 寬度)。透過一個方便的表格,了解 Bootstrap 網格系統的各個方面如何在多個裝置上運作。 Bootstrap 容器
<div class="container"> <!-- 內容在此 --></div>
使用 .container-fluid 用於全寬容器,跨越整個視口的寬度。
<div class="container-fluid"> <!-- Content here --></div>
使用 .container-lg-screen 在裡面使用 .container-fluid 用於特大寬度容器,跨越整個視口的寬度。
<divclass="container-lg-screen"> <!-- Content here --></div>