d-sm-none 在手机上仍显示，因其仅在视口≥576px时生效，而手机竖屏宽度（如iphone 14的390px）属xs断点，未触发隐藏；正确做法是用d-block d-sm-none实现“仅手机可见”。
为什么加了 d-sm-none 手机上还是显示？
因为 d-sm-none 只在视口 ≥576px 时生效，而真手机（比如 iPhone 14 竖屏 390×844）宽度远小于 576px，根本进不了 sm 断点——它压根不触发，元素照常显示。
想让内容「只在手机可见」，得反向操作：d-block d-sm-none：默认显示，从 576px 起隐藏。别指望 d-none d-sm-block，那是「手机隐藏、小屏及以上才显示」，方向反了。
-
d-none是全局开关，写在最前面才能被后续断点类“反向激活” - 没有
d-xs-none，xs 是默认态，靠不加类或d-block维持显示 - 测试时别只信 Chrome 模拟器的 “iPhone X” 预设——它宽 375px，属于 xs；要验证 sm 行为，得手动调到 576px+ 才行
d-none d-md-block 和 d-md-none 的行为差异
d-md-none 是单向屏蔽：只要视口 ≥768px，就 display: none；更小尺寸下，它不干预，元素按默认或父级样式渲染（可能是 inline、block 或 flex）。
d-none d-md-block 是两步控制：先全局隐藏，再在 md+ 主动设为 block。它确保「只在 md 及以上显示」，且不受父容器 display 影响。
- 如果你用
d-md-none却发现小屏也不见了，大概率是父容器用了d-none或其他 display: none 规则，把它连带干掉了 -
d-md-block单独用没意义——它不会让元素“从无到有”，只是在满足条件时覆盖 display 值；必须配合d-none或基础类（如d-block）才可控 - Bootstrap 5.3+ 的
d-*类默认带!important，手写 CSS 里直接写display: block会被它压住，除非你也加!important
如何实现「仅在 md 到 lg 之间显示」？
Bootstrap 没提供区间类，得靠组合。最稳写法是：d-none d-md-block d-xl-none——默认隐藏，md（768px）起显示，xl（1200px）起再次隐藏。
注意：lg 是 992px 起，xl 是 1200px 起，所以这个组合实际生效范围是 768px ~ 1199.98px，刚好跨过 lg，但不包含 xl。
- 别用
d-lg-block d-xl-none试图表达“只在 lg 显示”——它在 992px~1199.98px 生效，但 lg 断点本身不含上限，语义模糊易误判 - 如果需要精确卡死在 992px–1199.98px，建议补自定义类，比如
only-lg，配@media (min-width: 992px) and (max-width: 1199.98px)，避免边界像素渲染抖动 -
d-print类优先级极高，和响应式类混用时容易意外覆盖行为；例如d-none d-print-block是对的（仅打印时显示），但d-md-none d-print-block可能导致中屏隐藏、打印却显示——这不是 bug，是预期行为
隐藏后 JS 交互还有效吗？
无效。d-*-none 是 display: none，元素脱离渲染流，绑定在其上的事件监听器不会触发，getBoundingClientRect() 返回全 0，querySelector 仍能选中但无法交互。
这和 invisible（visibility: hidden）或 visually-hidden（clip + position）完全不同——后两者仍占位、可聚焦、屏幕阅读器可读。
- 密码显示/隐藏功能里，如果用了多份表单 +
d-sm-none复制结构，JS 通过document.getElementById只能找到第一个id="sifre"，其余副本完全失联 - 动态插入的元素（如 SSR 渲染或 JS append），若 Bootstrap CSS 未加载完成，
d-md-none类名存在也无效——浏览器不认识这个规则 - 用 collapse 插件做显隐时，目标容器必须带
collapse类，否则data-bs-toggle="collapse"不会生效，动画也不会触发动画类（如collapsing）
