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