bg-gradient-primary d-xl-block 不等于“仅 xl 启用渐变”，因为它仅控制元素显隐（小屏时 display: none 导致空白，而非纯色回退），而 bg-gradient-primary 本身全局生效；正确做法是用 @media (min-width: 1400px) 精准覆盖 background-image，基础态设 background-color，方向用 135deg，颜色至少两个，并兼顾深色模式、文字对比度及子元素透明度。

为什么 bg-gradient-primary d-xl-block 不等于“仅 xl 断点启用渐变”

它只是让元素在 xl（≥1400px）时显示，小屏时整个容器被 display: none 隐藏——你看到的是空白，不是纯色回退；而且 bg-gradient-primary 本身在所有断点都生效，只是被隐藏了。真正要的，是渐变样式本身只在 xl 生效，其他断点用纯色兜底。

正确做法：用 @media (min-width: 1400px) 覆盖 background-image

Bootstrap 5 的 xl 断点严格定义为 1400px（不是 1399px 或 1401px），必须精准匹配。关键点是只改 background-image，不碰 background-color，避免清掉已有背景逻辑：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 先写基础态：.hero { background-color: #fff; }（小屏到 lg 都用这个）
• 再加媒体查询：

  @media (min-width: 1400px) {
    .hero {
      background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
    }
  }

• 方向用 135deg 比 to right 更稳，尤其兼容旧版 Safari
• 颜色至少两个，否则仍是纯色；移动端 Safari 对 50% #000 格式比 50%, #000 更友好

全屏生效需确保容器高度撑满视口

渐变再对，如果 .hero 没高度，还是看不见。常见漏点：

• min-height: 100vh 必须加在目标元素上，height: 100vh 会导致内容超长时截断
• 若页面有 fixed 导航栏，得补 padding-top，否则内容被遮挡
• 某些插件（如 offcanvas）会动态修改 body 类或样式，导致 min-height 失效，可加 !important 保底（仅此处合理）

多处复用？自定义 bg-xl-gradient-primary 类

如果多个组件都要“仅 xl 启用渐变”，可以自己定义类，但注意权重问题：

• Bootstrap 的 bg-light 等类自带 !important，你的规则也得加：

  .bg-xl-gradient-primary {
    background-image: linear-gradient(135deg, #0d6efd, #86b7fe) !important;
  }

• SCSS 中推荐复用变量：@include media-breakpoint-up(xl) { ... }，避免硬编码 1400px
• 使用时顺序很重要：class="bg-xl-gradient-primary bg-white"，自定义类在前，保底色在后
• 别漏掉深色模式适配：@media (prefers-color-scheme: dark) and (min-width: 1400px) 单独重写渐变色，否则用户切深色主题后仍看到亮色渐变

文字对比度和子元素遮挡是最容易被忽略的两点：浅渐变配 text-dark 常跌破 WCAG 标准；.card 这类默认白色背景的子元素会完全盖住父容器渐变，得手动设 background-color: rgba(255,255,255,0.9) 留透出空间。