.bg-gradient类直接加在.row上无效，因.row的负外边距、flex布局及子元素背景会遮挡渐变；需用外层容器（如.featured-row）配合媒体查询实现断点渐变，并注意重置样式、避免覆盖、适配深色模式。
直接给 .row 加 bg-gradient 类无效
Bootstrap 的 .row 默认带 display: flex、负外边距（margin: 0 -15px）和 flex-wrap: wrap，而 bg-gradient-primary 这类工具类只注入 background-image，但 .row 本身没有背景色或背景区域——它的子元素（如 .col）通常有 background-color 或白色卡片，会完全盖住父级渐变。你检查 computed styles 会发现 background-image 确实存在，但视觉上“没生效”，其实是被遮挡了。
必须用媒体查询 + background-image 覆盖容器
想让某一行在 md 断点起显示渐变，得选一个**真正有渲染面积且不被子元素覆盖的容器**，比如外层 div 包裹 .row，然后对它写 CSS：
- 基础态（小屏）设
background-color，例如.featured-row { background-color: #f8f9fa; } - 在
@media (min-width: 768px)里覆盖background-image，方向用角度（如90deg表示左→右），不用to right - 颜色至少两个，避免退化为纯色；移动端 Safari 对
50% #000比50%, #000更稳 - 别用
background简写，否则会清掉background-color回退逻辑
.featured-row {
background-color: #f8f9fa;
}
@media (min-width: 768px) {
.featured-row {
background-image: linear-gradient(90deg, #0d6efd, #20c997);
}
}
如果坚持用 .row 作为目标容器，得先重置它的布局干扰
.row 的负 margin 和 flex 设置会让渐变区域错位或被裁剪。真要这么做，必须：
- 显式重置
margin：margin: 0或mx-0 - 确保它有高度（
min-height或内容撑开），否则渐变不可见 - 子元素
.col改用透明背景：bg-transparent或bg-white bg-opacity-90，否则仍会遮挡 - 避免同时用
g-*间距类——它们依赖负 margin，与渐变容器冲突
自定义断点渐变类时，!important 几乎不可避免
Bootstrap 的 bg-light、bg-white 等类自带 !important，而你的媒体查询规则默认权重不够。若写成：
<div class="featured-row bg-light"></div>
那 bg-light 会压过你媒体查询里的 background-image。解决办法只有两个：
- 去掉
bg-light，纯靠自定义类控制背景（推荐） - 自定义类里加
!important：background-image: linear-gradient(...) !important
更隐蔽的坑是：深色模式下，prefers-color-scheme: dark 里必须单独重写渐变色值，否则用户切深色主题后看到的仍是亮色系渐变——这和断点无关，但常被一起漏掉。
