Bootstrap 5 不支持 d-{breakpoint}-border 类，边框工具类无响应式前缀，需通过媒体查询配合自定义 CSS 实现响应式边框控制，且必须使用 !important 并严格匹配断点值。
Bootstrap 5 中没有 d-{breakpoint}-border 类
bootstrap 官方工具类里压根没提供类似 d-sm-border 或 d-lg-border-0 这种「响应式边框开关」。所有边框相关工具类（如 border、border-0、border-top）都是静态的，不带断点前缀，一加就全局生效。
想让边框只在特定断点显示，得靠组合 + 自定义 CSS
常见需求比如「仅在桌面屏显示下边框」「手机上隐藏所有边框」，必须手动补一层媒体查询，不能只靠 Bootstrap 原生类解决。
- 先用原生类设默认状态，比如
border-bottom让所有尺寸都有下边框 - 再写自定义 CSS 覆盖掉不需要的断点：
@media (max-width: 767.98px) { .border-bottom-mobile-off { border-bottom: none !important; } } - 或者反向：默认无边框，只在 lg+ 加边框
@media (min-width: 992px) { .border-bottom-lg-only { border-bottom: 1px solid #dee2e6 !important; } } - 别指望
d-none能隐藏边框——它隐藏的是整个元素，不是边框本身
为什么不能用 visibility: hidden 或 opacity: 0 模拟「隐藏边框」
这两个属性根本不会动 border，只是让内容不可见或透明，边框照常渲染、占位、影响布局。实测中容易导致 padding/margin 错位，尤其在 flex 容器里，子元素仍按有边框计算尺寸。
-
visibility: hidden：边框还在，getBoundingClientRect()返回值含边框宽度 -
opacity: 0：边框视觉消失，但鼠标悬停、焦点、无障碍读取全不受影响 - 真要「移除边框影响」，只能用
border: none或border-width: 0
兼容性与优先级陷阱
Bootstrap 的边框类默认不带 !important，但你手写的媒体查询如果没加，很容易被 Bootstrap 的 border 类覆盖。尤其当你引入了多个 CSS 文件，加载顺序错乱时，问题更隐蔽。
- 务必在自定义规则里加
!important，例如border-bottom: none !important; - 断点值必须严格对齐 Bootstrap 5 的定义：
sm: 576px、md: 768px、lg: 992px、xl: 1200px - 避免用
min-width: 768px，而要用min-width: 768px—— Bootstrap 的媒体查询是包含等号的，边界像素（如刚好 768px）必须匹配 - 如果项目用了 Sass，直接复用 Bootstrap 的
$grid-breakpoints变量最稳妥
真正控制边框的响应式逻辑，从来不在 class 名字里藏着，而在你写的那几行媒体查询里。漏掉 !important、写错像素值、或误以为 d-none 能局部生效，是线上最容易复现又最难定位的问题。
