d-none 在小屏没生效是因为它本身不响应式，永远隐藏；需用 d-*-none 类（如 d-md-none）配合断点才生效，且须匹配 Bootstrap 版本的默认断点。
为什么 d-none 在小屏没生效？检查媒体查询断点是否匹配
Bootstrap 的 d-none 本身不响应式，它只是个「永远隐藏」的类；真正起响应作用的是带前缀的变体，比如 d-md-none、d-lg-none。如果你写了 d-none 却指望它只在某尺寸下隐藏，那它会在所有尺寸都消失——这是最常被忽略的前提。
关键看你的 Bootstrap 版本和目标断点：
- Bootstrap 5 默认断点：
xs（sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）、xxl（≥1400px） - 想“仅在桌面端隐藏”，该用
d-lg-none（≥992px 隐藏），不是d-none - 若项目自定义了
$grid-breakpoints，但没重新编译 CSS，那 HTML 里写的d-xl-none可能根本没对应样式
d-none 和 visibility: hidden 的隐藏逻辑完全不同
d-none 是通过 display: none 移除元素渲染流，它不占空间、子元素不渲染、无法被聚焦或读屏器访问；而 visibility: hidden 只是视觉隐藏，仍占布局位置，子元素默认继承隐藏状态（除非显式设 visibility: visible）。
常见误用场景：
立即学习“前端免费学习笔记（深入）”；
- 想做「渐隐动画」却用
d-none→ 不行，display不支持过渡，得换opacity+visibility - 隐藏表单字段但保留其提交值 →
d-none会阻止<input>提交，应改用visually-hidden类或aria-hidden="true"+position: absolute - 用 JS 切换
d-none后，想用getBoundingClientRect()获取尺寸 → 返回全 0，因为元素已脱离文档流
如何用媒体查询补全 Bootstrap 没覆盖的隐藏需求？
Bootstrap 不提供 d-print-none 或 d-hover-none 这类类名，遇到打印隐藏、悬停显示/隐藏等场景，必须手写媒体查询。注意优先级和选择器权重：
- 直接在
<style>或自定义 CSS 文件中写：@media print { .d-print-none { display: none !important; } } - 避免用
!important覆盖 Bootstrap 原生类，推荐新建命名空间，如my-d-hover-none，再配合@media (hover: hover) - 移动端无 hover 状态，
@media (hover: hover)能安全隔离桌面行为，比单纯写:hover更可靠 - 如果用 Sass，可复用 Bootstrap 的
media-breakpoint-up/down混合宏，保持断点一致
服务端渲染（SSR）或 JS 动态插入时，d-* 类可能失效
当元素由 JS 动态创建并插入 DOM，或 SSR 框架（如 Next.js、Nuxt）未正确注入 Bootstrap CSS 时，d-md-none 这类类名即使写对了也不会生效——浏览器根本没见过对应样式规则。
排查步骤：
- 打开 DevTools → Elements 面板，检查该元素是否真有
d-md-none类，且没有拼写错误（比如写成d-md-hide） - 在 Styles 面板搜索
d-md-none，确认对应 CSS 规则存在且未被禁用（灰色表示被覆盖或未加载） - 如果是 Tailwind 用户混用了 Bootstrap 类，注意两者前缀冲突（Tailwind 默认也用
d-），需调整prefix配置或避免共存 - Next.js 中若用
className动态拼接，确保字符串不含空格或非法字符，例如`d-${size}-none`中size为undefined会产出d--none
响应式隐藏不是加个类就完事，断点、显示机制、加载时机、框架约束，每个环节都可能静默失败。盯住 DevTools 的 Elements 和 Styles 面板，比查文档更快定位问题。
