bootstrap 5 不支持 border-lg、border-md-0 等响应式边框类，仅提供无断点的静态边框类（如 border、border-0）；需手写带 !important 的媒体查询（如 @media (min-width: 768px) { .border-md { border: 1px solid var(--bs-border-color) !important; } }）实现响应式边框。
Bootstrap 5 没有 border-lg、border-md-0 这类响应式边框类，写了也无效 —— 官方 CSS 文件里压根没生成这些规则。
为什么 border-lg-0 或 d-lg-border 不生效
这类写法在 Bootstrap 5.1–5.3 中完全被忽略：DevTools 查不到对应样式，浏览器也不解析。官方只提供静态边框类（如 border、border-0、border-top），全部无断点前缀。误用会导致边框在目标断点下“该消失却不消失”或“该出现却没出现”。
-
border border-lg-0→border-lg-0不存在，浏览器跳过，border全局生效 -
d-none d-lg-block+border→ 控制的是整个元素渲染，不是边框本身；小屏时内容和 padding 全丢，布局塌陷 -
visually-hidden或invisible→ 只影响可访问性或 visibility，border依然渲染、占位、参与盒模型计算
用 border-md 或 border-lg 实现“中大屏才有边框”
这是最轻量、语义清晰且团队协作友好的方案，需手动补 CSS，但只需写一次，后续直接复用。
- 定义方式（必须加
!important）：@media (min-width: 768px) { .border-md { border: 1px solid var(--bs-border-color) !important; } } -
border-md生效范围：≥768px（即 iPad 横屏、常规笔记本），覆盖绝大多数桌面场景 -
border-lg更保守，@media (min-width: 992px)起效，避开 iPad 10.2" 竖屏（768×1024）误显 - 别用
border-sm或border-xs—— Bootstrap 5+ 已移除，写了白写 - 如果项目重写了
--bs-border-color，border-md会自动继承，无需额外覆盖
手写媒体查询控制特定边框（如仅 lg 屏加底边框）
适合精细控制单边、线型、颜色的场景，比如表格行在桌面加 border-bottom，手机端去掉。
- 边界值必须精确：用
max-width: 991.98px，而非991px或992px，避免刚好 992px 宽度设备双显/双隐 - 优先用
border: none，不用border: 0—— 后者会清掉border-style，后续设border-color失效 - 若元素已带
border-bottom类，你的自定义规则必须更高优先级：@media (min-width: 992px) { .table-row-lg-border { border-bottom: 2px solid #dee2e6 !important; } } - 不要试图覆盖所有断点，按真实需求实现 1–2 个即可（如只做
border-lg-only和border-md-bottom）
别踩的坑：border-{side}-{breakpoint} 类的真相
这是 Bootstrap 5 唯一原生支持断点的边框类（如 border-end-sm），但它只控制「某一边是否显示」，不控制宽度、线型或颜色。
-
border-end-sm= 小屏及以上显示右边框，但线型是 solid、宽度是 1px、颜色取自--bs-border-color，无法单独改 -
border-dashed必须紧跟border才生效：border border-dashed✅，border-dashed border❌ -
border-sm-dashed等带断点前缀的线型类，仅 Bootstrap 5.2+ 支持；用 CDN 引入 5.1.x 的项目写了也白搭 - 想实现「md 下虚线、lg 下实线」？必须手写媒体查询，工具类做不到
真正起作用的从来不是 class 名字，而是你写的那几行 @media 规则。漏掉 !important、写错 767.98px 这种边界值、或误以为 d-none 能局部开关边框，是线上最常复现又最难排查的问题。
