核心控制方式是使用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 在桌面有边框、手机无边框，就只在中屏及以上加边框：
-
border-md：从md（768px）起显示边框，小屏自动无边框 - 搭配
rounded-md可同步控制圆角响应式（可选） - 不要混用
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 配合边框？
常见误解是“隐藏再显示”，但这样会导致两个问题：
- 手机端整个 Card 被设为
display: none，内容不可见、不可访问、不占布局空间——和“保留 Card 结构、只去边框”目标不符 - 如果 Card 内有表单、链接或焦点元素，
d-none会让它们无法聚焦或被屏幕阅读器读取 - 某些场景下（如配合 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">。注意 <code>!important 是为了覆盖默认 border 类的权重。
真正容易被忽略的是：边框颜色（border-color）和宽度（border-width）也受响应式类影响，比如 border-primary 和 border-2 都没有响应式变体，必须统一设置或用自定义 CSS 补齐。
