bootstrap 4 的 bg-gradient- 类不支持断点响应，因其仅生成固定 background-image 声明，未内置如 d- 的断点前缀机制；需手动用媒体查询或 css 变量实现小屏单色、大屏渐变效果。
Bootstrap 4 本身不支持断点级背景渐变类，bg-gradient 系列工具类（如 bg-gradient-primary）是静态的、无响应式的；若要在 Flex 容器中实现“小屏单色、大屏渐变”这类效果，必须手动补媒体查询或改用 CSS 变量 + 自定义类。
为什么 bg-gradient-* 类不响应断点
Bootstrap 4 的渐变类（如 bg-gradient-primary）只生成一组固定 background-image: linear-gradient(...) 声明，没有配套的 bg-gradient-sm-primary 这类响应式变体。它不像 align-items-* 或 d-* 那样内置断点前缀机制。
- 直接写
class="bg-gradient-primary"→ 所有屏幕尺寸都生效，无法按断点切换 - 试图写
bg-gradient-sm-primary→ 浏览器完全忽略，该类不存在 - 即使容器是
d-flex，渐变行为也不受 Flex 属性影响——它只是背景层，与布局逻辑解耦
在 Flex 容器里安全叠加渐变的两个前提
Flex 容器本身不影响背景渲染，但容易因高度缺失或子项塌陷导致渐变“看不见”。要让渐变真正显示出来，必须满足：
-
.d-flex容器需有明确高度：加min-height: 100vh或h-100（并确保父级也设高，如.container.h-100） - 避免子项用
align-self-stretch撑满后又设overflow: hidden，这可能裁掉渐变边缘 - 渐变方向建议用
to bottom或to right，避免to top在 Flex 容器中因重排导致视觉错位
手动实现断点渐变的最小可行方案
不引入 Sass 或构建流程，仅靠内联样式或额外 <style></style> 即可达成：
<div class="d-flex flex-column h-100">
<div class="flex-fill bg-gradient-custom"></div>
</div>
<p><style>
.bg-gradient-custom {
background-image: linear-gradient(135deg, #007bff, #6f42c1);
}
@media (max-width: 767.98px) {
.bg-gradient-custom {
background-image: linear-gradient(135deg, #007bff, #007bff);
}
}
</style></p>
- 用自定义类名（如
bg-gradient-custom）避开 Bootstrap 冲突 - 媒体查询断点值严格匹配 Bootstrap 4 的
sm上限：max-width: 767.98px（不是768px），否则会和md断点重叠 - 渐变色值写全（不要用
var(--primary)），Bootstrap 4 不带 CSS 变量支持
Flex 容器中渐变失效的典型调试路径
如果渐变没出现，先检查这三项，比重写类更快：
- DevTools 中看该元素的
computed height—— 若为0px，说明 Flex 容器没撑开，加min-height: 100vh - 检查是否误加了
background-color类（如bg-light），它会覆盖background-image - 确认没在父级上设
overflow: hidden，尤其当 Flex 容器嵌套在.row或.card中时
真正麻烦的不是写渐变，而是让 Flex 容器在各断点下始终保有可渲染的高度空间——这点比渐变逻辑本身更常被忽略。
