d-none在小屏没生效是因为它非响应式，需用带断点前缀的类如d-sm-none；但d-sm-none实际在≥576px时隐藏，而iphone竖屏375px属xs断点故不生效。
为什么d-none在小屏没生效
d-none 不是响应式类，它会让元素在所有断点都消失。想“只在小屏隐藏”，必须用带断点前缀的类，比如 d-sm-none 或 d-md-none。但要注意：这些类的触发条件是 min-width，不是“小屏时生效”。d-sm-none 实际含义是“视口宽度 ≥576px 时隐藏”，而 iPhone 竖屏（375px）属于 xs 断点，d-sm-none 根本不匹配、不生效。
d-{breakpoint}-none 的生效逻辑和顺序陷阱
Bootstrap 5 的响应式显示/隐藏靠 CSS 层叠顺序生效，不是开关式切换。多个 d- 类共存时，后写的、更高断点的类优先级更高，且只在对应 min-width 区间内激活。
-
d-none d-md-block：先全局隐藏，再在 ≥768px 时设为display: block→ 仅中屏及以上显示 -
d-block d-md-none：默认显示，≥768px 时隐藏 → 仅 xs + sm 显示 -
d-none d-md-block d-xl-none：最终生效区间是 768px – 1199.98px（md 到 xl 前） - 错误写法：
d-md-none d-none—— 后者无断点，直接覆盖全部，元素永远消失
如何让元素只在特定断点区间内显示
Bootstrap 没有内置的「仅在 md–lg 区间显示」类，必须组合控制。最可靠写法是「先隐藏，再逐段开启」：
<div class="d-none d-md-block d-xl-none">只在 md 到 xl 前显示</div>
注意边界值：Bootstrap 的 xl 是 min-width: 1200px，所以 1199.98px 仍属 lg，d-xl-none 不触发。如果需要更精确控制（比如只在 992px–1199.98px），必须手写媒体查询：
@media (min-width: 992px) and (max-width: 1199.98px) {
.only-lg { display: block !important; }
}
边框不能靠 d- 类隐藏，必须单独处理
很多人误以为给元素加 d-none 就能“隐藏边框”，其实 d-none 隐藏的是整个元素，不是边框本身；而 visibility: hidden 或 opacity: 0 完全不影响 border 渲染，还会占位、错乱布局。
- 边框显隐必须单独控制：
border: none或border-width: 0 - Bootstrap 5 没有
d-lg-border这类响应式边框类，唯一原生支持断点的边框工具是border-end-sm这种单边类 - 高频需求建议封装自定义类，例如：
.border-md对应@media (min-width: 768px) { .border-md { border: 1px solid var(--bs-border-color); } } - 手写媒体查询时，像素值必须严格对齐 Bootstrap 定义：md 是
768px，不是767px或770px，否则边界设备会抖动
真正决定响应式行为的，从来不是 HTML 里写了几个 class，而是你是否理解了 d-{breakpoint}-* 的层叠机制、断点边界值的包含关系，以及边框这类独立 CSS 属性必须单独干预的事实。漏掉 !important、写错像素、或指望 d-none 能局部生效，都是线上最容易复现又最难定位的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
