Bootstrap中Card边框无法直接按屏幕尺寸开关，必须用断点工具类组合（如.border-lg.d-lg-inline-block包裹.card.border-0）或自定义CSS实现；单独.border或.border-0均为全局生效，无内置.border-lg-none类。

Card边框怎么按屏幕尺寸开关？

bootstrap 没有内置的 border-lg-none 这类类名，直接写 border 或 border-0 都是全局生效的——你没法靠一个 class 实现“大屏有边框、小屏无边框”。必须用断点工具类组合或自定义 css。

用 d-* + border 工具类组合实现（推荐）

最轻量、零额外 CSS 的做法：把边框“画”在伪元素上，再用显示类控制。但更常用且稳妥的是拆解为两层容器，靠 d- 类切换：

• 给 .card 本身设 border-0（默认无边框）
• 在外层加一个
  包住 card，仅在 lg+ 显示带边框的 wrapper
• 注意：d-lg-inline-block 要配合 vertical-align: top 防止 baseline 错位，否则卡片会下沉

示例结构：

<div class="border-lg border-secondary d-lg-inline-block">
  <div class="card border-0">
    <div class="card-body">内容</div>
  </div>
</div>

为什么不用 media query 写自定义 CSS？

可以，但容易踩坑：


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• 如果直接写 @media (min-width: 992px) { .card { border: 1px solid #dee2e6; } }，会和 Bootstrap 的 border-0 冲突，优先级未必赢
• 必须加 !important 或提高选择器权重（比如 .card.border-responsive），维护成本上升
• Bootstrap 5.3+ 的 border- 工具类本身已编译进 CSS，复用它们比手写 media query 更可靠

别忽略卡片内边距与视觉平衡

边框开关后，小屏下卡片会“贴边”，大屏下突然多出 1px 边框 + 默认 padding，视觉密度不一致：

• 建议同步调整内边距：p-3 p-lg-4（小屏 1rem，大屏 1.5rem）
• 或者统一用 px-3 py-3 px-lg-4 py-lg-4，避免左右/上下不对称
• 边框颜色别用默认 border（#dee2e6），小屏隐藏时留白感太强，可改用 border-lg-secondary 微调灰度

真正麻烦的不是加边框，而是边框出现后，卡片和其他元素之间的呼吸感是否还一致——这点常被跳过，直到 QA 提 bug 才补。