Bootstrap 响应式边框类如 border-md 可实现“手机隐藏、桌面显示”，其本质是媒体查询控制边框仅在 ≥768px 断点生效；border-lg 更保守（≥992px），避免大屏平板竖屏误显；禁用已移除的 border-sm/xs；d-none/d-md-block 组合无法真正响应式控制边框，需直接使用带断点的边框工具类。
用 border-md 或 border-lg 控制边框仅在中大屏显示
直接写 border 会让边框在所有设备上都出现，包括手机。想“手机端隐藏、桌面端显示”，本质是让边框只在某个断点及以上生效——bootstrap 提供了带响应式前缀的边框工具类，border-md 就是最常用的选择。
它等价于：@media (min-width: 768px) { .border-md { border: 1px solid var(--bs-border-color); } }，也就是说：手机竖屏（通常 ≤767.98px）时完全不渲染边框，平板横屏起才开始显示。
-
border-md：适合大多数场景，覆盖平板横屏 + 桌面 -
border-lg：更保守，只在 ≥992px（如常规桌面）生效，能避开部分大屏平板竖屏（如 iPad 10.2" 竖屏 768×1024）误显边框 - 别用
border-sm或border-xs—— Bootstrap 5+ 已移除这些类，写了无效
为什么 d-none d-md-block 加边框不行
有人试图用显示/隐藏类组合控制边框，比如给卡片加 d-none d-md-block，再额外加 border。这会导致两个问题：
- 边框样式本身没断点，
border仍会在所有尺寸生效，只是容器被隐藏了——但一旦显示，边框就立刻出现，无法实现“仅中大屏有边框”的语义 -
d-none会触发display: none !important，可能干扰卡片内部 flex 布局或 JS 插件（如轮播图初始化）
真正需要的是“边框本身响应式”，不是“靠隐藏容器来间接控制”。
自定义 CSS 媒体查询要小心断点值
如果项目里已有全局样式覆盖了 .card 边框，比如写了：
@media (max-width: 767.98px) {
.card {
border: none;
}
}
那即使你加了 border-md，也会被这条规则覆盖（因为 max-width 查询优先级常高于工具类）。排查时打开 DevTools → Styles 面板，看 border 声明是否被划掉，并点文件名定位来源。
- Bootstrap 默认断点是
575.98px（xs）、767.98px（sm）、991.98px（md），手动写媒体查询时务必对齐这些值，避免边界抖动 - 若必须自定义，推荐用
border-md-0（仅在 md 及以下清除边框）替代无前缀的border-0，语义更清晰
移动端真机测试容易漏掉的点
模拟器里看着正常，但真机上边框“变细”甚至“消失”，大概率是高 DPR 屏幕（如 iPhone、部分安卓旗舰）把 1px 渲染成亚像素，肉眼不可见。
- 临时解法：把
border-md换成border-md-2（2px 边框） - 更稳妥方案：用
box-shadow: 0 0 0 1px var(--bs-border-color)替代边框，它不受像素比影响 - 务必在 iOS Safari 和主流安卓 WebView 上实测，别只信 Chrome DevTools 的模拟
边框的“可见性”不只取决于 CSS 写法，还卡在设备渲染层——这点最容易被跳过。
