<p>移动端 bg-gradient“失效”实为 background-color 覆盖 background-image；需用 @media (max-width: 767.98px) { ... background-image: none !important; } 清除渐变，并搭配 bg-* 类提供主题自适应纯色 fallback。</p>
为什么 bg-gradient 在移动端看起来“没生效”或“颜色怪怪的”
不是渐变失效，而是它和移动端纯色背景类（比如 bg-light）共存时发生了层叠冲突：bg-gradient-primary 只设置 background-image，而 bg-light 设置的是 background-color。小屏下两者同时存在，background-color 会完全盖住渐变图层——你看到的只是纯色，但渐变其实还在 CSS 里悄悄运行。
用 @media 强制清空 background-image 最可靠
真正让渐变“消失”的动作，是把它的载体干掉：把 background-image 设为 none，而不是隐藏元素或删类。Bootstrap 的渐变工具类权重高，不加 !important 很难覆盖。
- 必须写
background-image: none !important，写background: none会连background-color一起清掉，导致背景变透明甚至空白 - 断点值严格用
(max-width: 767.98px)（对应 Bootstrap 5 的sm上限），别用767px或768px - 这个规则要放在你自定义 CSS 文件的靠后位置，或确保选择器比 Bootstrap 原生类更具体（比如加个父容器类）
示例：
@media (max-width: 767.98px) {
.hero-section {
background-image: none !important;
}
}搭配 bg-* 类才能有纯色 fallback
光清掉渐变还不够，得明确指定小屏该显示什么颜色。这时候 bg-primary、bg-light 这类工具类就派上用场了——它们只设 background-color，且在渐变被清掉后自然生效。
- HTML 中顺序无所谓，但建议把纯色类放前面，比如
class="bg-light bg-gradient-primary hero-section" - 别指望
d-sm-none d-md-block控制渐变开关：它控制的是元素显隐，不是样式条件启用 - 如果用了深色模式（
data-bs-theme="dark"），注意bg-light在暗主题下可能变成深灰，需额外用data-bs-theme="light"局部覆盖或改用bg-white
深色模式下容易漏掉的颜色对比问题
即使渐变被成功禁用，bg-gradient-primary 对应的纯色 fallback（比如 bg-primary）在深色模式下仍是亮蓝色（#0d6efd），叠加在暗背景上文字可能看不清。这不是断点问题，而是颜色语义没随主题切换。
- 不要硬编码颜色值，优先用 CSS 变量：比如
background-color: var(--bs-primary-bg-subtle)，它会随data-bs-theme自动调整 - 检查浏览器开发者工具的
Computed面板，确认小屏下最终生效的background-color是你预期的值，而不是继承自某个父级或伪元素 - 移动端 Safari 对
background-image的渲染有时有延迟，加will-change: background可能缓解（但非常规必需）
