bg-gradient 在 bootstrap 4 中不响应断点且需与 bg-* 类共存、元素有高度才能生效；单独用于 .col 会静默失效，小屏无渐变因无媒体查询逻辑，须用自定义类加媒体查询实现断点控制。
bg-gradient 类在 Bootstrap 4 中不支持断点响应，也不能直接作用于 .col 元素生效——它只在搭配 bg-* 类（如 bg-primary）且元素有明确高度/内容撑开时才注入 background-image；单独给 .col 加 bg-gradient 会静默失效。
为什么 col-md-6 bg-gradient bg-primary 在小屏没渐变？
Bootstrap 4 的 bg-gradient 是静态开关，不是媒体查询类。它一旦启用，就在所有断点下生效；所谓“特定 col”只是 HTML 结构上的限定，CSS 层面没有断点逻辑。更关键的是：.col 默认是 display: flex 容器，若内部无内容或未设 min-height，高度塌陷，渐变自然不可见。
-
bg-gradient必须和至少一个bg-*类共存，否则不生成background-image - Bootstrap 4 的 SCSS 变量
$enable-gradients: true必须开启（默认是true，但自定义构建时可能被关掉） -
.col没内容时高度为 0，得加min-height: 100px或用height: 100vh等显式撑开 - 别用
bg-transparent或其他带!important的背景类覆盖它，权重会输
真正让某个 .col 在 md+ 才显示渐变的写法
必须放弃工具类幻想，用媒体查询直接控制 background-image。对目标列加自定义类（比如 col-gradient-md），然后在 CSS 中写：
/* 小屏：纯色 fallback */
.col-gradient-md {
background-color: #f8f9fa;
}
/* 中屏起：覆盖为渐变 */
@media (min-width: 768px) {
.col-gradient-md {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1) !important;
}
}
- 方向用
135deg比to right更稳，兼容 iOS 12/Safari 旧内核 - 必须加
!important：Bootstrap 4 的.col默认样式里有background-color带!important - 颜色至少两个，单色值（如
linear-gradient(to right, #0d6efd)）等于白写 - 不要用
background: linear-gradient()简写——它会清掉background-colorfallback，小屏直接透明
.col 里文字看不清？检查这三处
渐变一上，.col 内部的 .card、.btn 或普通段落常因背景遮盖而“消失”，这不是渐变没生效，而是层级问题：
- 子元素如
.card默认有background-color: #fff，完全盖住底层渐变 → 改成background-color: rgba(255, 255, 255, 0.92) -
.col自身没设color，文字继承父级（如body的#212529），浅渐变下对比度跌破 4.5:1 → 显式加text-white或text-dark - 用了
overflow: hidden或负 margin（如.row的margin-left: -15px），导致渐变区域被裁 → 检查 computed styles 中background-image是否被截断
最易忽略的其实是深色模式适配：如果用户开了 prefers-color-scheme: dark，你的 135deg 渐变仍按亮色渲染，视觉断裂。真要严谨，得补一条 @media (prefers-color-scheme: dark) 覆盖色值——但多数项目先确保亮色场景可用再说。
