Bootstrap 網格示例

五層網格

.col-4

.col-4

.col-4

.col-sm-4

.col-sm-4

.col-sm-4

.col-md-4

.col-md-4

.col-md-4

.col-lg-4

.col-lg-4

.col-lg-4

.col-xl-4

.col-xl-4

.col-xl-4

.col-xxl-4

.col-xxl-4

.col-xxl-4

三列等寬

.col-md-4

.col-md-4

.col-md-4

三列等寬備用

.row-cols-md-3

.row-cols-md-3

.row-cols-md-3

三列不等寬

.col-md-3

.col-md-6

.col-md-3

兩列

.col-md-8

.col-md-4

全寬，單列

全寬元素不需要網格類。

兩列並有兩個巢狀列

.col-md-8

.col-md-6

.col-md-6

.col-md-4

混合：移動和桌面

.col-md-8

.col-6 .col-md-4

.col-6 .col-md-4

.col-6 .col-md-4

.col-6 .col-md-4

.col-6

.col-6

混合：移動、平板電腦和桌面

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

.col-6 .col-sm-4

.col-6 .col-sm-4

間距

.col 含有 .gx-4

.col 含有 .gx-4

.col 含有 .gx-4

.col 含有 .gx-4

.col 含有 .gx-4

.col 含有 .gx-4

.col 含有 .gy-4

.col 含有 .gy-4

.col 含有 .gy-4

.col 含有 .gy-4

.col 含有 .gy-4

.col 含有 .gy-4

.col 含有 .g-3

.col 含有 .g-3

.col 含有 .g-3

.col 含有 .g-3

.col 含有 .g-3

.col 含有 .g-3

容器

.container

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid