手机端渐变背景重复并非bootstrap的bug，而是未设置background-repeat: no-repeat和background-size: cover所致；需在@media中用!important覆盖，或直接设background-image: none回退纯色。
手机端渐变背景重复，根本不是 Bootstrap 的 bug，而是你没关掉 background-repeat —— bg-gradient 类只管注入 background-image，它不碰 background-repeat 或 background-size，这两项默认仍是 repeat 和 auto。
为什么手机上渐变看起来“重复”或“碎裂”
渐变本身不会重复，但当你用 background-image: linear-gradient() 时，浏览器把它当普通图片处理：如果容器宽高超出渐变“自然尺寸”，又没显式设 background-repeat: no-repeat 和 background-size: cover，它就会平铺（repeat）或拉伸失真。
- 常见现象：小屏下 banner 区域出现多段相同渐变条纹、文字区域背景色断层、滚动时渐变“跳帧”
- 真正触发点不是断点切换，而是 viewport 宽度变小后，元素实际渲染尺寸与渐变图层尺寸不匹配
-
bg-gradient-primary这类类名完全不控制 repeat/size，它只加一条background-image声明
必须用媒体查询强制重置 background-repeat 和 background-size
不能靠删 bg-gradient 类，也不能指望 d-sm-none 隐藏元素来“禁用”渐变——隐藏的是整个 DOM，不是样式。要让渐变在手机端“存在但不重复”，就得用 CSS 覆盖其渲染行为。
- 在
@media (max-width: 767.98px)里写：background-repeat: no-repeat !important+background-size: cover !important - 必须加
!important：Bootstrap 的bg-gradient规则权重高，不加强制覆盖会被忽略 - 别用
background: linear-gradient(...) no-repeat cover简写：它会清掉background-color，导致小屏 fallback 失效 - 推荐写法是分开控制：
background-repeat和background-size单独声明，保留background-color作为降级
移动端 Safari 对 background-size: cover 的兼容性陷阱
iOS 15.4 之前，Safari 解析 background-size: cover 时若父容器 height: auto 且无内容，会回退成 auto，导致渐变仍平铺。这不是代码错，是渲染链路缺陷。
- 解决办法：给目标容器加
min-height: 100vh或明确的height，确保有可计算的尺寸基准 - 避免依赖
.container：它的左右padding会让背景图“看起来没铺满”，实际是留白，不是重复 - 如果用了
position: absolute子元素，检查是否遮挡了背景层——背景属于父容器，z-index 不影响它，但视觉上会被盖住
更稳妥的方案：手机端直接禁用渐变，只留纯色背景
很多项目其实不需要手机端渐变，只要保证视觉不突兀就行。与其硬调 repeat/cover，不如彻底关闭渐变，用 background-image: none 强制回退。
- 写法：
@media (max-width: 767.98px) { .my-section { background-image: none !important; } } - 关键点：必须用
background-image: none，不是background: none—— 后者会干掉整个背景，包括你靠bg-primary设的background-color - 只要同时用了
bg-primary这类颜色类，background-image: none后，background-color就自然成为手机端 fallback - 深色模式下记得补一句：
@media (prefers-color-scheme: dark) and (max-width: 767.98px)，否则暗色背景下纯色可能对比度不足
最常被忽略的一点：渐变是否重复，和断点类是否存在毫无关系；它只取决于你有没有在对应断点下，用足够权重的 CSS 控制 background-repeat 和 background-size —— 或者，更干脆地，把 background-image 设为 none。
