bootstrap 5 中用 border-md 类可实现“大屏显示、小屏隐藏”card边框，需配合 border-0 清除默认边框，推荐加在 card 外层容器或 card 元素上按 border-0 border-md 顺序书写，避免用 d-none 影响可访问性与布局。
用 Bootstrap 的响应式工具类控制 Card 边框显隐
直接用 border 工具类配合响应式前缀即可，不需要写自定义 CSS。Bootstrap 5 内置的 border-{breakpoint}-0 是最干净的解法。
-
border默认在所有断点生效，所以加border-0会全局去掉边框 - 要「大屏显示、小屏隐藏」，得反向操作：默认隐藏，只在大屏显示边框 → 用
border-md（或border-lg） - 注意断点命名：Bootstrap 5 中
md对应 ≥768px，lg对应 ≥992px，别错用成sm（它对应 ≥576px，比手机横屏还宽）
Card 组件里怎么加边框类才不被覆盖
Bootstrap 的 .card 自带 border 和 border-radius，如果直接在 .card 上加 border-md，可能被内部样式或重置规则干扰。稳妥做法是把边框加在包裹层或用 !important 覆盖（但优先选前者）。
- 推荐：给
.card外层容器加border-md，比如<div class="border-md"><div class="card">...</div></div> - 或者直接在
.card上加border-md border-0——border-0会清掉默认边框，border-md在中屏及以上恢复，顺序不能颠倒 - 如果用了
.card-body且边框颜色/宽度有定制需求，border-md只控制显隐，颜色仍走border-color，需额外加border-primary等
为什么用 display-none 会出问题
有人试过用 d-none d-md-block 控制整个 Card 显隐，但这不是“隐藏边框”，而是隐藏整个组件，语义和布局都会错乱。更糟的是，如果 Card 里有 h1 或 button，屏幕阅读器可能跳过重要内容。
-
d-none移除元素渲染流，影响高度、间距、焦点顺序 -
border-0或border-md只改边框，不影响盒模型和可访问性 - 真要隐藏整块内容，也该用
visually-hidden+visually-hidden-md这类语义化工具类，而不是d-none
检查 Safari 或旧版 Android WebView 是否兼容
Bootstrap 5 的响应式边框类依赖 CSS 媒体查询和 border 属性，现代浏览器都支持，但 iOS 14.5 以下 Safari 对 border-color: transparent 渲染偶有偏差，如果发现小屏仍有细线残留，加一行内联样式兜底：
.card {
border-color: transparent !important;
}
@media (min-width: 768px) {
.card {
border-color: #e9ecef !important; /* 用 Bootstrap 默认 border color */
}
}
这种场景极少，但调试时看到手机端边框没彻底消失，先查 computed style 里的 border-color 是否被其他样式覆盖，再决定要不要加这行。
真正容易被忽略的是断点阈值和父容器的 padding —— 如果 Card 外层有 px-3，缩放后视觉上像边框“没消失”，其实是内边距撑开的空白。
