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- 命名规则，页面照样在手机上显示为桌面缩放版。
必须加的 <meta name="viewport"> 标签
这是 Bootstrap 响应式能力的物理前提。没有它，移动端浏览器会按桌面宽度渲染（通常是 980px），然后整体缩放显示，导致文字小、点击难。
错误写法（缺 content 或值不对）：
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="initial-scale=1.0">
正确写法（三项缺一不可）：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
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 显示器的主流场景——改它们，通常是因为设计稿没对齐，而不是框架不够用。
