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

灵活组合列：自动换行、等宽、响应式偏移

栅格不只是均分，更要应对真实需求：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

立即学习“前端免费学习笔记（深入）”；

• 等宽自适应：<div class="col"> —— 多个 col 并列时自动均分剩余空间（无需指定数字） <li>响应式混合：<code><div class="col-12 col-md-6 col-lg-4"> —— 手机占满、中屏半宽、大屏三分之一 <li>偏移与空隙：<code>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 做分界点已足够实用。