要实现断点下背景色显示，需让背景类本身响应断点或用媒体查询控制，而非仅隐藏元素；推荐 d-none d-sm-block + bg-light 等组合，注意 d-none 必须在前；自定义带断点前缀的背景类或直接对容器写媒体查询更可靠；移动端 Safari 需双保险处理深色模式，且 JS 切换时应使用 classList 而非重置 className。
用 d-{breakpoint}-none 配合 bg-* 类控制断点背景显示
直接给元素加 bg-light 再叠一层 d-md-none，它不会“在中屏隐藏背景色”，而是把整个元素都藏了——背景色是元素的属性，元素没了，背景自然也没了。真要实现“只在某个断点显示背景”，得让背景色类本身响应断点，或者把背景色写进媒体查询里。
推荐组合方式：d-none d-sm-block + bg-light，意思是“默认隐藏，小屏起显示并带浅灰背景”。注意顺序不能颠倒，d-none 必须在前，否则会被后面的响应式类覆盖。
-
d-none d-lg-block bg-dark→ 仅在 lg 及以上显示深色背景 -
d-none d-md-block d-xl-none bg-success→ 仅在 md ~ xl-1（768px–1199.98px）区间生效 - 别用
bg-light d-md-none这种写法：背景类不响应断点，d-md-none只影响 display，不是“条件渲染背景”
为什么不能靠媒体查询直接改 .bg-* 类的 background-color
Bootstrap 的 .bg-light 这类工具类是静态声明，CSS 规则里没有媒体查询包裹。你写 @media (max-width: 575.98px) { .bg-light { background-color: #f8f9fa; } } 是无效的——因为 .bg-light 本身优先级更高（来自 Bootstrap CSS 文件），你的媒体查询规则会被覆盖。
真正可行的做法只有两种：
- 自己定义带断点前缀的新类，比如
bg-xs-light、bg-md-dark，并在对应媒体查询里声明background-color - 放弃工具类，直接对目标容器写媒体查询，例如：
@media (min-width: 768px) { .hero-section { background-color: #004d40; } }
后者更可控，也避免类名爆炸；前者适合需要复用多处的场景，但得同步维护 SCSS 变量和断点逻辑。
移动端 Safari 对 body 背景色切换的兼容性坑
如果你在 body 上用媒体查询切背景色，比如 @media (prefers-color-scheme: dark) { body { background-color: #121418; } }，iOS 16+ Safari 可能根本不触发重绘——哪怕系统主题已切，页面还是白底。
必须双保险：
- 显式重写 CSS 变量：
@media (prefers-color-scheme: dark) { :root { --bs-body-bg: #121418; } } - 再加一条兜底样式：
body[data-bs-theme="dark"] { background-color: #121418; }，并确保 HTML 标签有data-bs-theme="dark"属性（JS 控制或服务端注入） - 别忘了
min-height: 100vh，否则深色模式下内容少时，底部仍是一条刺眼的白边
这个坑只在真实 iOS 设备或 Safari 技术预览版里明显，Chrome 模拟器测不出来。
用 JS 动态切换断点背景时，别直接操作 className
想根据窗口宽度实时切背景？别写 document.body.className = 'bg-dark'，这会清掉所有已有 class，包括 container-fluid 外层可能依赖的布局类，甚至破坏 Bootstrap 的 data-bs-* 行为。
正确做法是用 classList 管理：
- 先定义好几组背景类：
bg-day、bg-night、bg-dusk - 监听
resize时，用classList.replace('bg-day', 'bg-night')或classList.toggle('bg-night', shouldApply) - 如果只是按断点切，不如用
window.matchMedia监听，比频繁 resize 更轻量：matchMedia('(min-width: 992px)').matches
最易忽略的一点：resize 事件会高频触发，记得防抖，否则在拖动窗口时可能卡住渲染。
