Bootstrap4 网格系统

Bootstrap 4 网格类遵循以下命名模式：.col-{breakpoint}-{columns}

• breakpoint: 断点标识 (xs, sm, md, lg, xl)
• columns: 列数 (1-12)

断点说明：

使用 .col 类创建等宽的列：

使用 .col-{number} 类创建指定宽度的列：

使用响应式网格类在不同屏幕尺寸下创建不同的布局：

在中等屏幕(≥768px)及以上，布局为8:4比例；在较小屏幕上，列将垂直堆叠。

使用 .offset-{breakpoint}-{columns} 类来偏移列：

使用 .order-{breakpoint}-{number} 类来改变列的顺序：

在列内嵌套额外的行和列来创建更复杂的布局：

• 始终将列放在行内，将行放在容器内
• 使用响应式断点类来创建移动优先的布局
• 列的总和不应超过12，超出的列将换行显示
• 合理使用偏移和排序功能来创建复杂布局
• 在需要时使用嵌套网格来组织复杂内容
• 利用Flexbox工具类来对齐和分布内容