手机端隐藏Card边框需用自定义CSS媒体查询，因Bootstrap 5无border-sm-0等响应式边框类；正确做法是添加自定义class并配合@media (max-width: 575.98px)设border: none，或用d-显示类间接控制外层边框容器。
Card边框在手机端隐藏的CSS规则怎么写
直接用 border + 媒体查询控制最可靠，bootstrap 自带的 border- 工具类（如 border-0）不支持响应式断点，必须自己加规则或组合使用。
常见错误是以为 border-sm-0 这类类名存在——它并不存在，Bootstrap 5 没有提供带断点的边框工具类。
- 正确做法：给 Card 元素加一个自定义 class（比如
card-border-responsive），再在 CSS 中用@media (max-width: 575.98px)（对应 Bootstrap 的sm断点）设border: none - 如果已用
border-primary等类，不能靠覆盖类名顺序解决，因为工具类优先级高，必须用更高权重的选择器或!important（不推荐） - 注意：Bootstrap 5 默认
sm断点是576px，媒体查询要用max-width: 575.98px才能精准匹配「小于 sm」
用 Bootstrap 工具类组合实现的替代方案
虽然没有 border-sm-0，但可以利用 border + d- 显示控制类间接达成类似效果，前提是边框是独立元素（比如用 border 类加在子容器上）。
- 把边框抽出来：用
<div class="border border-primary"></div>包裹 Card 内容，而不是直接给.card加border - 然后对这个外层 div 控制显示：
class="border border-primary d-sm-block d-none"—— 这样它只在sm及以上显示 - 缺点：多一层 DOM，且无法控制边框粗细/样式变化，仅适用于“有/无”切换场景
为什么不能直接用 border-0 + 响应式类
因为 Bootstrap 官方工具类中，border- 系列（如 border、border-0、border-top）全部是全局生效的，没有 border-sm-0、border-md-0 这类变体。这是设计取舍，不是遗漏。
- 源码里搜索
border可以确认：所有边框工具类都未绑定断点前缀 - 同理，
rounded-、shadow-也一样，只有d-、text-、bg-等少数工具类支持响应式前缀 - 想统一管理响应式边框？得自己扩展 Sass 变量或写插件，不推荐轻量项目这么做
移动端隐藏后要注意的视觉衔接问题
边框消失后，Card 往往只剩内边距撑开空间，容易和相邻元素“粘连”，尤其在列表场景下。
- 建议同步调整
margin-bottom：手机端用mb-3→mb-2或加mb-sm-4配合mb-2 - 如果 Card 有背景色，隐藏边框后阴影（
shadow-sm）可能更关键，别忘了检查box-shadow在小屏是否仍足够分隔 - 真机测试时注意：iOS Safari 对
border-radius+overflow: hidden的裁剪有时会残留像素线，必要时加transform: translateZ(0)强制硬件加速
响应式边框本质是视觉层级调控，不是单纯删样式；手机端去掉边框后，得靠间距、阴影、背景对比度来维持信息区块的独立性——这点容易被忽略。
