Bootstrap 响应式需手动配置 viewport 标签并正确使用栅格类；必须写全 width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no；col-前缀按断点（xs/sm/md/lg/xl/xxl）控制响应时机。

Bootstrap 不是“开箱即用就能响应式”的魔法，它只在你正确引入、合理使用栅格类和响应式工具类的前提下才生效。跳过 viewport 元标签或误用 col- 命名规则，页面照样在手机上显示为桌面缩放版。

必须加的 标签

这是 Bootstrap 响应式能力的物理前提。没有它，移动端浏览器会按桌面宽度渲染（通常是 980px），然后整体缩放显示，导致文字小、点击难。

错误写法（缺 content 或值不对）：

正确写法（三项缺一不可）：

• width=device-width 让视口宽度匹配设备物理宽度
• initial-scale=1.0 防止 iOS Safari 自动缩放
• maximum-scale=1.0 和 user-scalable=no 是可选但推荐，避免用户误操作放大后布局错乱

col- 类名里的断点前缀决定生效时机

Bootstrap 5 的栅格系统默认有 5 个断点：xs（sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）、xxl（≥1400px）。类名中带哪个前缀，就在对应断点及以上宽度生效。

常见误解：以为 col-sm-6 表示“只在 small 屏幕用”，实际是“在 sm 及更大屏幕都生效”。

• col-6 → 所有屏幕（包括 xs）等分 6 列
• col-sm-6 → ≥576px 时占 6 列，
• col-md-4 col-lg-3 → ≥768px 占 4 列，≥992px 占 3 列；更小屏幕仍堆叠

不写前缀（如只写 col-6）会导致小屏也强制分栏，内容挤成窄条——这不是响应式，是反响应式。

响应式工具类（d- 系列）比媒体查询更轻量

想让某个元素“只在桌面显示、手机隐藏”，别急着写 @media (max-width: 575.98px)，Bootstrap 提供了语义化类名：

• d-none d-sm-block → 手机（xs）隐藏，sm 及以上显示
• d-block d-md-none → 所有屏幕显示，但 ≥768px 时隐藏
• d-lg-flex d-xl-grid → lg 用 flex，xl 用 grid，适配不同布局复杂度

注意：d-none 本身作用于所有断点，必须搭配断点前缀覆盖；单独写 d-none 就是全局隐藏。

性能影响小，但滥用会导致 HTML 冗余。例如同一区域用 d-none d-md-block + d-block d-md-none 做两套内容，不如用 JS 动态加载。

自定义断点或禁用响应式？小心 CSS 体积和维护成本

Bootstrap 5 默认支持 Sass 变量定制，可通过修改 $grid-breakpoints 新增或删减断点。但多数项目不需要：

• 新增一个 xxxl 断点，意味着所有 col-、d-、text- 类都要生成对应 CSS，CSS 文件体积明显上涨
• 禁用响应式（如设 $enable-responsive-font-sizes: false）看似省事，但会丢失 fs-* 类的流体字号能力，后续靠媒体查询补更麻烦
• 真正需要定制的，往往是栅格列数（$grid-columns: 24）或间距单位（$spacer: 1rem），而非断点本身

响应式不是越多断点越强，而是用最少的断点覆盖最多的设备真实行为。Bootstrap 默认的 6 个断点，已覆盖从 iPhone SE 到 4K 显示器的主流场景——改它们，通常是因为设计稿没对齐，而不是框架不够用。