bootstrap 5 不支持响应式边框类，需用媒体查询手写 .border-lg-only 等自定义类，并严格匹配断点值（如 min-width: 992px）、使用 border: none、加 !important 保证优先级。
Bootstrap 5 没有 d-lg-border、border-md-0 这类响应式边框类，所有边框工具类（如 border、border-0、border-top）都不带断点前缀，写了就全局生效——这是你边框“不响应”的根本原因。
为什么 border-lg 或 border-sm-0 完全无效
这类写法在 Bootstrap 5.1–5.3 的 CSS 文件里压根不存在。DevTools 中查不到对应规则，浏览器直接忽略。官方只生成了静态边框类，断点逻辑只存在于 display 类（如 d-md-none）和单边控制类（如 border-end-sm）中。
-
border-end-sm是唯一原生支持断点的边框相关类，但它只控制「右/下/上/左某一边是否显示」，不能设粗细、颜色或完整边框 -
border-md和border-lg不是官方标准类，部分社区构建版本可能包含，但不可依赖；一旦升级或换构建流程，立刻失效 - 写了
border border-lg-0，后半部分被丢弃，border仍全局生效，导致“lg 屏边框还在”
用媒体查询实现真正可控的断点边框
最稳妥的方式是手写 CSS，复用 Bootstrap 的断点值，并注意边界精度和优先级：
- 断点必须严格对齐：xs ≤575.98px、sm ≥576px、md ≥768px、lg ≥992px、xl ≥1200px；写成
min-width: 768px正确，min-width: 767px或max-width: 767px会导致 768px 设备不触发 - 默认状态建议设为无边框，再在目标断点加边框，避免被原生
border类覆盖：@media (min-width: 992px) {<br> .border-lg-only { border: 1px solid var(--bs-border-color); }<br>} - 务必加
!important，否则 Bootstrap 的border类（无!important）会优先于你的媒体查询规则 - 不要用
border: 0替代border: none—— 前者会清掉border-style，后续设border-color时无效
为什么不能用 d-none d-lg-block 包裹带边框的元素
这不是“隐藏边框”，而是“移除整个 DOM 节点”。后果比想象中严重：
- 表格行（
<tr>）用 <code>d-none后，整行塌陷，tr高度丢失，破坏表结构 - 卡片（
.card）去掉后，内部padding、box-shadow全部消失，视觉层级断裂 - 表单控件失去焦点能力：
d-none元素无法获得 focus，:focus样式和 JS 事件全部失效 - Flex/Grid 子项被移除后，剩余子项会重排，布局行为完全改变
- 边界值必须带
.98，例如max-width: 991.98px，否则刚好 992px 宽的设备可能双显或双隐 -
border默认颜色取自--bs-border-color，如果你改过主题色或重写了该变量，自定义类中的var(--bs-border-color)会自动继承，无需硬编码颜色值 - 如果项目用了 Sass，可安全扩展：在
_utilities.scss中修改$enable-responsive-utilities: true并手动添加边框断点生成逻辑，但需确保构建流程包含该文件
容易被忽略的细节：断点边界与变量继承
真正影响效果的不是类名有多“像”，而是那几行媒体查询是否对齐了 Bootstrap 的像素定义和 CSS 变量链：
