bg-gradient-primary d-md-none 隐藏整个元素而非仅渐变，因 d-md-none 设置 display: none；真正关闭渐变需用 @media (max-width: 767.98px) { background-image: none !important; }。
为什么 bg-gradient-primary d-md-none 不是“隐藏渐变”而是“隐藏整个元素”
这个组合会让元素在中屏及以下完全消失（display: none），不是渐变被关掉，而是内容没了。用户看到的是空白区域，不是回退到纯色背景。真正需要的是：渐变样式本身不生效，但容器和文字仍可见。常见误判是检查 computed styles 时发现 background-image 是 none，其实是因为父级或子级的 background-color（比如 bg-white）盖住了它，而不是渐变被“隐藏”了。
用 @media 把 background-image 设为 none 才算真正关闭渐变
Bootstrap 的渐变本质是 background-image: linear-gradient()，要让它在特定断点下失效，就得精准覆盖这个属性，而不是动 display 或 background 简写。关键点：
- 必须用
background-image: none，不是background: none（后者会清掉background-color，导致小屏变透明） - 必须加
!important：Bootstrap 的bg-gradient-primary规则权重高，不加很可能被忽略 - 断点值严格对齐 Bootstrap 5：小屏禁用就用
@media (max-width: 767.98px)，不是767px或768px
示例：只在 md 及以上保留渐变，小屏强制关闭并回退为白色背景：
.hero-section {
background-color: #fff;
}
@media (max-width: 767.98px) {
.hero-section {
background-image: none !important;
}
}
如果必须保留工具类，d-none d-md-block 要套两层容器
单个元素上同时加 bg-gradient-primary 和 d-none d-md-block 仍会出问题——因为小屏时元素虽隐藏，但 HTML 结构还在，JS 或 SEO 可能误读。更稳妥的做法是结构分离：
- 外层容器负责小屏纯色背景和可见性：
<div class="bg-light"> <li>内层仅在大屏渲染渐变：<code><div class="bg-gradient-primary d-none d-md-block"> <li>用 <code>position: absolute或z-index让内层覆盖外层（注意子元素层级）
这种方式适合模板化渲染场景，但布局风险高，稍有不慎就会遮挡文字或点击区域。
深色模式下渐变关闭逻辑容易漏掉 prefers-color-scheme
即使你在小屏关掉了渐变，用户切到深色模式后，如果没单独处理，bg-gradient-primary 依然会按亮色变量渲染（比如 #0d6efd → #86b7fe），在暗背景下对比度极低。必须补一层嵌套媒体查询：
@media (max-width: 767.98px), (prefers-color-scheme: dark) {
.hero-section {
background-image: none !important;
}
}
或者更精细地分开控制：小屏关渐变 + 深色模式换渐变色，而不是一刀切。这点常被忽略，直到用户反馈“夜间看不到字”才意识到。
