Bootstrap 5 中用 border-md 类可实现“大屏显边框、小屏隐”，因其仅在≥768px生效；border-0 会全局清空边框并覆盖响应式类，故应避免混用，只保留单一响应式边框类。
用 border- 响应式工具类控制 Card 边框显隐
bootstrap 5 自带的响应式边框工具类可以直接实现「大屏显示边框、小屏隐藏」，无需写自定义 css。关键在于用对 border- 系列类的断点前缀。
比如想让 .card 在 md 及以上显示边框，sm 及以下不显示，直接加 border-md 类即可——它只在 md（768px）及以上生效，更小断点自动移除边框样式。
-
border：全断点生效（默认） -
border-sm：仅sm（576px）及以上有边框 -
border-md：仅md（768px）及以上有边框 → 最常用选择 -
border-lg：仅lg（992px）及以上有边框
示例：
<div class="card border-md"> <div class="card-body">内容</div> </div>
为什么不用 border-0 + 媒体查询覆盖？
有人试图写 border-0 d-md-block 或配合 @media 手动设 border: none，这反而容易出错：
-
border-0是强制清空所有断点的边框，会覆盖掉border-md的声明优先级 - Bootstrap 的响应式工具类是基于
!important实现的，但顺序写错（如border-0 border-md）会导致border-0生效，边框永远不出现 - 手动媒体查询需维护断点值，和 Bootstrap 内置断点不一致时会出现临界尺寸错位
正确顺序是只保留一个边框类：border-md，干净且可靠。
Card 内部元素边框也想响应式？
如果 Card 的 header、footer 或分隔线（.card-divider）也需要响应式边框，同样适用 border- 工具类，但要注意作用对象：
-
.card-header默认无边框，加border-bottom-md可让它在大屏下显示底边 -
.card-divider默认有border-top，想让它只在大屏显示，改用border-top-md - 避免对
.card加border-md同时又对.card-body加border-top-md——可能产生双线重叠
示例（仅大屏显示 header 底边）：
<div class="card border-md"> <div class="card-header border-bottom-md">标题</div> <div class="card-body">内容</div> </div>
兼容性与 SSR 注意点
这个方案在 Bootstrap 5.2+ 完全支持，但注意两个实际坑：
- 如果你用的是 Bootstrap 4，它没有
border-md这类响应式边框类，必须升级或手写 CSS（如@include media-breakpoint-up(md) { .card { border: 1px solid #dee2e6; } }） - 服务端渲染（如 Next.js、Nuxt）中，若初始 HTML 渲染时断点判断不准（比如 UA 检测误判为 mobile），可能导致首屏边框状态错误；建议依赖纯 CSS 媒体查询，而非 JS 动态加类
真正要留意的不是怎么写，而是确认你用的 Bootstrap 版本是否原生支持这些类——查一下 官方文档 borders 页面，搜 border-{breakpoint} 就能验证。
