Bootstrap不支持原生响应式边框工具类，需用border-0与border-lg组合实现大屏显示小屏隐藏；自定义样式必须手写CSS媒体查询，常见错误包括误用不存在的类名或层级错位。

Card边框的响应式控制依赖CSS媒体查询，不是Bootstrap内置类直接支持

bootstrap 5/6 没有像 border-sm-0 border-lg-1 这样的原生响应式边框工具类（border- 系列只支持固定断点生效，比如 border-lg 表示“仅在lg及以上生效”，但无法反向实现“仅lg显示、xs/sm/md隐藏”）。所以必须手写css或复用现有断点类组合。

用Bootstrap断点类组合实现“大屏显示、小屏隐藏”边框

核心思路：默认隐藏边框，再用 border-lg 类在lg及以上触发显示。注意顺序和覆盖逻辑：

• border-0 放前面，重置所有断点下的边框
• border-lg 放后面，仅在 min-width: 992px（lg断点）及以上生效
• 确保两个类都加在同一个 <div class="card"> 元素上，不要拆到子元素 <pre class="brush:php;toolbar:false;">&lt;div class=&quot;card border-0 border-lg&quot;&gt; &lt;div class=&quot;card-body&quot;&gt;内容&lt;/div&gt; &lt;/div&gt;</pre> <p>⚠️ 注意：<code>border-lg 默认是 border: 1px solid #dee2e6，颜色和粗细不可控；若需自定义，仍需CSS。

  需要自定义边框样式时，必须写CSS媒体查询

  比如要设 2px solid #0d6efd，且只在 ≥1200px（xl）显示，小屏完全无边框——这时Bootstrap类不够用：

  

  VPS Bootstrap

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

  下载
  • 不能依赖 border-xl（Bootstrap没提供 xl 边框工具类）
  • 不能靠 border-0 + border-xl 组合（因为 border-xl 不存在）
  • 必须自己写CSS，且用 @media (min-width: 1200px) 覆盖默认无边框状态

  <div class="card border-0 card-border-xl">
    <div class="card-body">内容</div>
  </div>

  对应CSS：

  @media (min-width: 1200px) {
    .card-border-xl {
      border: 2px solid #0d6efd;
    }
  }

  常见踩坑：用错断点类名或层级覆盖失效

  实际调试中高频出错点：

  • 写了 border-lg-0 border-xl-1 —— 错！Bootstrap没有 border-lg-0 这种写法，只有 border-0 和 border-lg
  • 把 border-0 加在 .card-body 上，而 border-lg 加在 .card 上 —— 错！边框属于父容器，子元素设 border-0 不影响父容器边框
  • 用了 border 工具类但没删掉自定义CSS里的 border 声明 —— 导致样式冲突，浏览器开发者工具里看到 border 被划掉

  真正在意边框细节时，别硬凑工具类，直接写带断点的CSS更可控，也更容易排查。