網格

網格

雖然 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>