<p>Bootstrap 5.3+ 响应式隐藏必须用 d-{breakpoint}-{value} 格式，禁用旧类；d-none 全局隐藏，d-sm-none 在 ≥576px 隐藏，d-md-block 在 ≥768px 以 block 显示；invisible 仅 visibility:hidden 仍占位且可读，与 d- 类不可混用；断点仅 xs/sm/md/lg/xl/xxl 六种，无 d-xs-none 等臆造类；JS 动态切换需先清除所有 d- 类再设置，避免冲突。</p>
Bootstrap 响应式隐藏类怎么写才不翻车
Bootstrap 5.3+ 已彻底移除 .hidden-xs、.visible-md-block 这类旧语法，所有响应式显示/隐藏必须用 d-{breakpoint}-{value} 格式。写错断点名或混用旧类，元素会“该藏不藏”或“全屏消失”，而且控制台不会报错——这是最常踩的坑。
-
d-none：无条件隐藏（所有尺寸），相当于display: none -
d-sm-none：当屏幕 ≥ 576px（即 sm 及以上）时隐藏；小于此尺寸则显示 -
d-md-block：仅在 ≥ 768px（md 及以上）时以block显示；更小尺寸下默认不生效（可能保持 inline 或被父容器决定） - 想“小屏隐藏、大屏显示”？别只写
d-lg-block，得组合：d-none d-lg-block——先全局隐藏，再在 lg+ 解锁
invisible 和 d-none 的本质区别在哪
很多人以为两者只是“隐藏程度不同”，其实它们触发的是完全不同的 CSS 属性：d-* 类操作 display，而 invisible 操作 visibility: hidden。这意味着前者从布局流中彻底消失，后者仍占位、仍影响周围元素排版，且——关键点——仍会被屏幕阅读器读取。
- 用
d-md-none隐藏侧边栏？没问题，但视障用户也同步“看不见”了 - 用
invisible d-lg-visible实现“仅大屏可见的辅助说明”？不行，invisible优先级高，会覆盖d-lg-visible；正确写法是d-none d-lg-block+ 额外加sr-only控制可访问性 - 不要对表单控件滥用
invisible：它不阻止聚焦，键盘用户仍能 tab 进去，可能引发逻辑混乱
哪些断点名不能乱写，浏览器根本不认
Bootstrap 官方断点只有 xs、sm、md、lg、xl、xxl 六个，没有 xs-block、mobile-none、tablet-hide 这种臆造名。尤其注意：xs 断点不支持单独的 d-xs-none 类——因为它是“默认断点”，隐藏行为直接由 d-none 覆盖，加 xs 反而无效。
- ✅ 正确：
d-sm-none、d-xl-block、d-xxl-flex - ❌ 错误：
d-xs-none（无此类）、d-mobile-none（不存在）、hidden-sm（Bootstrap 5 已废弃） - 断点阈值是固定的：
sm≥576px、md≥768px、lg≥992px、xl≥1200px、xxl≥1400px；别指望改 CSS 变量就能让d-md-在 800px 触发
JavaScript 动态切换时要注意什么
用 JS 切换 classList 是常见需求，但直接 el.classList.add('d-none') 很容易和响应式类冲突。比如一个元素同时有 d-sm-none 和 d-none，你删掉 d-none，它在小屏还是隐藏——因为 d-sm-none 依然生效。
- 动态控制前，先用
el.classList.remove(...)清掉所有d-*类，再按需添加，例如：el.className = 'd-none d-md-block' - 避免用
style.display = 'none'混合操作：它会覆盖所有d-*类，且无法响应窗口 resize - 监听
resize时别频繁操作 classList，建议节流或改用 CSS @media + 自定义属性配合 JS
d-md-block 不代表“只在 md 生效”，而是“md、lg、xl、xxl 都生效”。一旦忽略这点，响应式就变成玄学。 
