Bootstrap如何让Card边框在大屏显示在小屏隐藏的响应式布局规则

border-0 border-lg是最直接有效的组合，先全局移除边框再仅在≥992px断点恢复；单独用border-lg无效，因.card自带默认边框需先清除；顺序不可颠倒，且应加在.card元素上以避免覆盖。

border-0 border-lg 是最直接有效的组合，先全局移除边框，再仅在 ≥992px 断点恢复——不是“隐藏整个卡片”，而是真正控制边框本身的渲染。

为什么不能只写 border-lg

Bootstrap 的 border 工具类默认无前缀时作用于所有断点，border-lg 本身只在 lg 及以上生效，但它不会覆盖已有的边框样式。而 .card 自带 border: 1px solid var(--bs-border-color)，所以单独加 border-lg 不会起效，因为默认边框始终存在。

1. border-0 必须前置，用于清除 .card 默认边框
2. border-lg 紧跟其后，在 ≥992px 时重新画出边框（等价于 border-1）
3. 顺序不能颠倒：border-lg border-0 会导致 lg 下也无边框

border-md 和 border-lg 怎么选

关键看你的“大屏”定义是否包含平板横屏：

1. 用 border-md：适配 ≥768px，覆盖 iPad 横屏（1024×768）、多数安卓平板横屏，但可能让部分大屏手机（如 Pixel 7 Pro 横屏 1080×2132）也显示边框
2. 用 border-lg：更保守，≥992px 才生效，避开大部分手持设备，适合强调“桌面专属视觉”的场景
3. 别用 border-sm 或 border-xs：Bootstrap 5+ 已移除，写了无效

加在哪一层才不被覆盖

.card 内部有重置规则和嵌套结构，直接加类容易被干扰。稳妥做法是：

1. 优先加在 .card 元素上：<div class="card border-0 border-lg"> —— 简洁，但需确认没其他 CSS 强制重写 border
2. 次选外层容器：<div class="border-0 border-lg"><div class="card">...</div></div> —— 完全隔离，避免样式冲突
3. 别加在 .card-body 或 .card-header 上：它们不控制卡片整体边框

真机测试常被忽略的细节

模拟器里看着正常，但 iPhone 或高 DPR 安卓机上边框“变细甚至消失”，大概率是 1px 在 Retina 屏被渲染为亚像素：

1. 临时解法：换 border-lg-2（2px 边框），肉眼可见性更强
2. 更稳方案：用 box-shadow: 0 0 0 1px var(--bs-border-color) 替代边框（需自定义 CSS 或内联 style）
3. iPad Pro 横屏（1024px）属于 lg 断点，边框会显示；但某些安卓平板竖屏仅 600px，仍属 md，边框不出现——这是预期行为，不是 bug

边框开关后，小屏下卡片突然“贴边”，大屏多出 1px + 默认 padding，视觉密度不一致。同步调整内边距（比如 p-3 p-lg-4）比硬调边框更重要。