Bootstrap如何设置Card边框在屏幕显示在手机端隐藏的具体逻辑类

核心控制方式是使用Bootstrap 5+响应式border类如border-md，使Card在桌面端显示边框、手机端自动无边框；不可用d-none/d-md-block，否则Card整体隐藏，违背“仅去边框”需求。

Card边框在PC显示、手机端隐藏的核心控制方式

直接用 Bootstrap 的响应式工具类组合即可，不需要写额外 CSS。关键在于：边框本身（border）是通过 border- 类控制的，而显示/隐藏由 visible- 或 d-（display）类控制；但注意——border 不会因为元素 display: none 就“消失”，它只是随元素一起不可见；真正要实现“PC有边框、手机无边框”，得在不同断点上切换 border 类本身。

推荐做法：用断点前缀覆盖 border 类

Bootstrap 5+ 支持响应式 border 工具类，例如 border（所有断点生效）、border-md（≥768px 才生效）、border-sm（≥576px），以此类推。想让 Card 在桌面有边框、手机无边框，就只在中屏及以上加边框：

1. border-md：从 md（768px）起显示边框，小屏自动无边框
2. 搭配 rounded-md 可同步控制圆角响应式（可选）
3. 不要混用 border + d-none d-md-block，否则小屏虽隐藏了整个 Card，但不符合“Card 显示、仅去边框”的需求

示例 HTML：

<div class="card border-md"><div class="card-body"><p class="card-text">这段 Card 在手机上没边框，桌面才有</p></div></div>

为什么不用 d-none d-md-block 配合边框？

常见误解是“隐藏再显示”，但这样会导致两个问题：

1. 手机端整个 Card 被设为 display: none，内容不可见、不可访问、不占布局空间——和“保留 Card 结构、只去边框”目标不符
2. 如果 Card 内有表单、链接或焦点元素，d-none 会让它们无法聚焦或被屏幕阅读器读取
3. 某些场景下（如配合 JS 动态操作），d-none 会干扰 DOM 查询逻辑（比如 getBoundingClientRect() 返回空）

兼容性与自定义扩展提醒

Bootstrap 4 不支持 border-md 这类响应式边框类（需手动补全或升级）；若仍在用 v4，必须自己写媒体查询：

@media (max-width: 767.98px) {.card-no-border-on-mobile {border: none !important;}}

然后在 HTML 中写：<div class="card border card-no-border-on-mobile">。注意 !important 是为了覆盖默认 border 类的权重。

真正容易被忽略的是：边框颜色（border-color）和宽度（border-width）也受响应式类影响，比如 border-primary 和 border-2 都没有响应式变体，必须统一设置或用自定义 CSS 补齐。