bootstrap 5 不支持 border-lg-primary 等响应式边框颜色类；必须通过 border 基础类配合媒体查询自定义，如 .border-lg-primary 需在 min-width: 992px 下设 border-color 并加 !important，且必须保留 border 类以确保宽度生效。
Bootstrap 5 没有 border-lg-primary 这类响应式边框颜色类
直接写 border-lg-primary 或 border-md-danger 在 Bootstrap 5.1–5.3 中完全无效——CSS 规则压根不存在，DevTools 里查不到对应样式。所有内置的 border-{color} 类（如 border-primary）都是静态的，不带断点前缀，一加就全局生效。
真正能用的只有两类组合：
-
border+border-{breakpoint}-0：先全局启用边框，再在特定断点关闭（例如border border-md-0表示“所有尺寸有边框，≥768px 时去掉”） -
border-{side}-{breakpoint}方向类：如border-end-sm（小屏及以上加右边框），但只控制“是否显示”，不能指定颜色或线型
想在 lg 断点下显示红色边框、xs 下显示灰色边框？必须手写媒体查询。
用媒体查询 + 自定义类实现断点边框色
推荐在项目 CSS 中补一组可复用的类，比如 border-lg-primary，并严格对齐 Bootstrap 的断点值（lg: 992px）：
@media (min-width: 992px) {
.border-lg-primary {
border-color: #0d6efd !important;
}
}
@media (max-width: 991.98px) {
.border-lg-primary {
border-color: #dee2e6 !important;
}
}
使用时：<div class="border border-lg-primary">内容</div>。注意两点：
- 必须保留
border（或border-1）基础类，否则border-color无宽度可渲染 - 务必加
!important，否则会被 Bootstrap 原生border-primary覆盖（它没加!important，但权重更高）
为什么不能靠 d-none + 多个带色边框元素模拟
有人尝试这样写：<div class="border-primary d-none d-lg-block"></div>
<div class="border-secondary d-block d-lg-none"></div>。这看似可行，但实际踩坑不少：
- 两个元素 DOM 结构重复，语义混乱，影响无障碍读取
- 若父容器是
flex或grid，d-lg-block可能破坏布局流（尤其在 flex 容器中，d-inline-block不生效） - 边框宽度默认是 1px，
border-primary只改颜色，不设宽度；若没显式加border，虚线/实线都不可见
更轻量的做法是只用一个元素，靠媒体查询切换 border-color，而不是靠 display 控制元素显隐。
移动端 Safari 和深色模式下的兼容细节
如果目标设备含 iOS Safari，要注意：
- 旧版 Safari 对
min-width: 992px解析可能有像素级偏差，建议用min-width: 992px（Bootstrap 官方断点定义包含等号） - 深色模式下，
#0d6efd等浅色主题值可能对比度不足，可在媒体查询里嵌套@media (prefers-color-scheme: dark)单独调整 - 不要用
visibility: hidden或opacity: 0“隐藏边框”——边框仍占位、影响布局，且鼠标悬停焦点不受控
最终生效的关键不在类名多炫酷，而在那几行媒体查询里：!important 有没有，断点值对不对，border 基础声明有没有漏。
