bootstrap 5 不提供响应式边框工具类，仅支持静态边框类如 border、border-0 等；需通过自定义媒体查询结合其断点值（如 sm:576px、md:768px）精确控制边框显示，避免使用 d-none 模拟导致布局破坏。
bootstrap 5 中没有 border-{breakpoint}-* 响应式边框工具类
bootstrap 官方 css 工具类库（截至 v5.3+）**不提供任何响应式边框控制类**，比如 d-sm-border、border-md-0 或 border-lg-none 这类写法根本不存在，加了也无效。
它只提供了静态边框类：border、border-top、border-0、border-primary 等，全部无断点前缀，一加就全局生效。
想让边框「仅在桌面显示、手机隐藏」或「只在平板加底边框」，必须自己补媒体查询，不能靠 Bootstrap 原生类组合。
用自定义媒体查询实现断点边框控制
最稳妥的做法是复用 Bootstrap 的断点值，手写 CSS 规则。注意：Bootstrap 的断点是 min-width，不是区间，且边界像素要留余量（如 max-width: 767.98px），避免 768px 正好卡在断点线上导致双显/双隐。
-
@media (max-width: 575.98px) { .my-card { border: none; } }→ 仅 xs（纯手机竖屏）去边框 -
@media (min-width: 768px) and (max-width: 991.98px) { .my-card { border-bottom: 2px solid #dee2e6; } }→ 仅 md 断点区间加底边框 -
@media (min-width: 992px) { .my-card { border: 1px solid #ced4da; } }→ lg 及以上才显示完整边框
别抄错数值：Bootstrap 5 断点为 xs: 0、sm: 576px、md: 768px、lg: 992px、xl: 1200px、xxl: 1400px。写成 769px 或 992px（没减 0.02）容易出边界问题。
为什么不能用 d-none + 边框类模拟“隐藏边框”
有人试图用 d-none d-lg-block 包裹一个带 border 的元素来“只在大屏显示边框”，这本质是隐藏/显示整个元素，不是控制边框本身——它会连内容一起消失，布局重排，和单纯开关边框行为完全不同。
典型误用场景：
- 表格行需要在手机上隐藏边框但保留数据行高 → 用
d-none会让整行塌陷，破坏tr高度 - 卡片组件需在小屏去掉边框但保持 padding 和阴影 →
d-none直接删 DOM 节点，padding 和 shadow 全丢 - 表单控件聚焦时加边框色，但希望只在桌面生效 →
focus状态依赖元素存在，d-none后无法触发
这类需求必须操作 border 属性本身，而不是靠 display 控制。
兼容旧项目或快速验证时的临时方案
如果只是临时调试、不想写新 CSS，可用内联 style 配合 JS 检测视口宽度，但仅限原型阶段：
const el = document.querySelector('.my-element');
function updateBorder() {
if (window.innerWidth >= 992) {
el.style.border = '1px solid #dee2e6';
} else {
el.style.border = 'none';
}
}
window.addEventListener('resize', updateBorder);
updateBorder();
注意：这种方式绕过了 CSS 层叠，!important 冲突风险高；且 SSR 场景下 window 未定义会报错；移动端 resize 频繁触发还可能卡顿。上线前务必替换成媒体查询。
真正要长期维护的项目，边框的响应式逻辑必须下沉到 CSS 层，靠 class 组合驱动，而不是靠 JS 或 display 类间接模拟。
