Bootstrap栅格系统通过12列布局、5级断点（xs/sm/md/lg/xl/xxl）和语义化类名（如col-md-4）实现响应式，无需手写媒体查询；需用container或container-fluid包裹row，再嵌套col，支持等宽自适应、混合断点、偏移与间距控制。
用 Bootstrap 栅格系统搭建响应式页面，核心是理解其 12 列布局、断点划分和类名命名逻辑，不写一行媒体查询也能适配手机、平板、桌面。
掌握 Bootstrap 的断点与列数规则
Bootstrap 5 默认提供 5 个响应断点（xs / sm / md / lg / xl / xxl），对应不同屏幕宽度。每个断点下，容器被划分为最多 12 等份，通过类名如 col-md-4 表示“在中屏及以上占 4 列”。注意：未指定断点的类（如 col-6）默认作用于 xs，而带断点的类（如 col-lg-3）会在该断点及更宽屏幕生效，小屏自动堆叠。
从容器开始：container、container-fluid 和 row
响应式布局必须包裹在正确容器内：
- container：居中、带左右 padding，宽度随断点变化（如 lg 下为 970px）
- container-fluid：100% 宽度，无最大宽度限制
- row：必须放在 container 内，负责清除浮动并提供负 margin，内部才能放 col
灵活组合列：自动换行、等宽、响应式偏移
栅格不只是均分，更要应对真实需求：
立即学习“前端免费学习笔记（深入）”；
- 等宽自适应：
<div class="col">—— 多个 col 并列时自动均分剩余空间（无需指定数字） - 响应式混合：
<div class="col-12 col-md-6 col-lg-4">—— 手机占满、中屏半宽、大屏三分之一 - 偏移与空隙：
offset-md-2向右空出 2 列；g-3（加在 row 上）统一设置列间距
快速验证与调试小技巧
- 临时加
border border-primary查看元素实际占位 - 用
bg-light+text-dark区分区块层次 - 缩小浏览器窗口，观察类名是否按预期切换（比如 col-sm-6 是否在手机上变成竖排）
- 避免嵌套 row 在 col 内却不加新的 row —— Bootstrap 要求 row → col → (可选) row → col
真正高效的响应式不是堆砌类名，而是用最少的断点覆盖主要设备场景，多数内容用 md 或 lg 做分界点已足够实用。
