Bootstrap 5 不支持 border-lg、border-md-0 等响应式边框类，因其未被官方 CSS 生成；唯一原生带断点的边框类仅限 border-{side}-{breakpoint}（如 border-end-sm），且只控制单边显隐，不支持线型/粗细/颜色响应式。
Bootstrap 5 不提供 border-lg、border-md-0 这类响应式边框类，写了就无效 —— 它们压根不在官方 CSS 文件里生成。
为什么直接写 border-lg 没反应
Bootstrap 5 的边框工具类（如 border、border-0、border-top）全部无断点前缀，一加就全局生效。所谓 border-md 或 border-lg 并非标准类，部分构建版本或社区扩展可能临时存在，但不可依赖。
-
border-lg-0、d-lg-border、border-end-lg等写法在 Bootstrap 5.1–5.3 中完全不生效，DevTools 查不到对应规则 - 唯一原生带断点的边框类只有
border-{side}-{breakpoint}（如border-end-sm），但它只控制某一边是否显示，不控制线型、粗细或颜色 - 写了
border border-lg-0，结果 lg 屏边框还在，是因为border-lg-0被浏览器忽略，只剩border全局起作用
用自定义媒体查询精准控制边框显隐
最可靠的方式是手写 CSS，复用 Bootstrap 的断点值，并注意边界精度和优先级。
- 断点必须严格对齐：xs ≤575.98px、sm ≥576px、md ≥768px、lg ≥992px、xl ≥1200px；写成
min-width: 768px正确，min-width: 767px或max-width: 767px会导致边界抖动 - 避免用
border: 0，改用border: none—— 后者重置全部边框属性，border-color后续设才有效 - 若元素已带
border类，你的新规则需更高优先级：!important或更具体选择器（如.card .border-lg-only） - 示例：仅在 lg 及以上显示完整边框
@media (min-width: 992px) {
.border-lg-only {
border: 1px solid #dee2e6 !important;
}
}
@media (max-width: 991.98px) {
.border-lg-only {
border: none !important;
}
}
别用 d-none / d-md-block 模拟“隐藏边框”
这本质是控制整个元素的显示/隐藏，不是操作边框本身 —— 布局会塌、JS 插件可能失效、padding/shadow 全丢。
-
d-none d-lg-block包裹一个带border的 div：小屏时整块 DOM 消失，大屏时边框突然出现，但无法实现“边框随尺寸渐变”的语义 - 表格行（
<tr>）用d-none会导致行高塌陷，破坏结构 - 表单控件聚焦态（
:focus）依赖元素存在，d-none后无法触发 -
visibility: hidden或opacity: 0更糟：边框仍在、占位、影响布局计算
border-md 类不是“魔法”，而是媒体查询的封装
某些项目中看到的 border-md 实际是开发者自己补的类，它等价于：
@media (min-width: 768px) {
.border-md {
border: 1px solid var(--bs-border-color) !important;
}
}
- 它适合「移动端去边框保简洁，桌面端加边框提结构」场景，覆盖 iPad 横屏（1024×768）和常规笔记本屏
-
border-lg更保守，只在 ≥992px 生效，能避开 iPad 10.2" 竖屏（768×1024）误显边框 - 禁用
border-sm或border-xs：Bootstrap 5+ 已彻底移除，写了也白费 - 如果用了自定义主题色或重写了
--bs-border-color，这类封装类会自动继承，无需额外覆盖
真正决定边框是否响应式的，是你写的那几行媒体查询 —— 漏掉 !important、写错像素值、或误以为 d-none 能局部生效，是线上最容易复现又最难排查的问题。
