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（默认无边框） - 在外层加一个
<div class="border-lg d-lg-inline-block"> 包住 card，仅在 lg+ 显示带边框的 wrapper<li>注意：<code>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？
可以，但容易踩坑：
- 如果直接写
@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 才补。
