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 及更大屏幕都生效”。
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
-
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 显示器的主流场景——改它们，通常是因为设计稿没对齐，而不是框架不够用。
