d-{breakpoint}-none 类仅在对应断点及更宽视口生效，非区间控制；d-sm-none 在手机无效因手机属 xs 断点（
直接用 d-{breakpoint}-none 类是最简单可靠的方式，但必须理解它只在对应断点及更宽视口生效，不是“区间控制”，也不是“仅在某尺寸下隐藏”——写错类名或误判断点，元素反而会在手机上显示。
为什么 d-sm-none 在手机上没效果？
因为 Bootstrap 5 的断点是 min-width 触发机制：d-sm-none 只在视口 ≥576px（即 sm 及以上）时应用 display: none，而绝大多数手机竖屏宽度在 360–414px 之间，属于 xs 断点，该类根本不匹配、不生效。
- xs 断点无前缀类，靠默认行为维持显示（如
div默认是display: block） - 想让元素在手机端（xs + sm）都隐藏，得先全局隐藏，再指定“从哪个断点开始恢复显示”
- 正确写法是：
d-none d-md-block（手机和小平板都不显示，≥768px 才显示）
表格整列隐藏不能只给 <td> 加类
<p><code><td> 和 <code><th> 默认是 <code>display: table-cell，直接套 d-sm-none 会破坏表格布局（变成 display: none，不再是表格单元格）；且单个单元格加类无法同步控制表头和所有数据行。
- 推荐做法：给
<th> 和对应列的全部 <code><td> 加统一类，例如 <code>col-actions
- 再配合 CSS：
th.col-actions, td.col-actions { display: none; } @media (min-width: 768px) { th.col-actions, td.col-actions { display: table-cell; } }
- 或者用
colgroup + 自定义样式，但 Bootstrap 不接管 <col> 的响应式逻辑，需手动补全
d-none 和 visually-hidden 别混用
d-none 彻底移除渲染流，屏幕阅读器不可见、子元素不渲染、不占空间；visually-hidden 是视觉隐藏但保留可访问性，适合隐藏辅助文字（如表单描述）。
立即学习“前端免费学习笔记（深入）”；
- 误用
d-none 隐藏 label 或提示文字，会导致屏幕阅读器跳过字段，违反 WCAG
-
visually-hidden 本身不带响应式变体，要实现“仅在 md 及以上隐藏”，得组合：visually-hidden visually-hidden-md（需自行扩展或手写媒体查询）
- 绝对不要写
class="d-none visually-hidden"——d-none 会覆盖所有样式，失去可访问性
最易被忽略的是断点边界的精度问题：Bootstrap 的 md 是 min-width: 768px，但浏览器在 768.02px 这种边界值上可能因渲染精度出现双显或双隐。真要严控，得用 @media (min-width: 768px) and (max-width: 991.98px) 这类带余量的写法，而不是依赖单一工具类。
<th> 和对应列的全部 <code><td> 加统一类，例如 <code>col-actions
th.col-actions, td.col-actions { display: none; } @media (min-width: 768px) { th.col-actions, td.col-actions { display: table-cell; } }
colgroup + 自定义样式，但 Bootstrap 不接管 <col> 的响应式逻辑，需手动补全
d-none 和 visually-hidden 别混用
d-none 彻底移除渲染流，屏幕阅读器不可见、子元素不渲染、不占空间；visually-hidden 是视觉隐藏但保留可访问性，适合隐藏辅助文字（如表单描述）。
立即学习“前端免费学习笔记（深入）”；
- 误用
d-none隐藏 label 或提示文字，会导致屏幕阅读器跳过字段，违反 WCAG -
visually-hidden本身不带响应式变体，要实现“仅在 md 及以上隐藏”，得组合：visually-hidden visually-hidden-md（需自行扩展或手写媒体查询） - 绝对不要写
class="d-none visually-hidden"——d-none会覆盖所有样式，失去可访问性
最易被忽略的是断点边界的精度问题：Bootstrap 的 md 是 min-width: 768px，但浏览器在 768.02px 这种边界值上可能因渲染精度出现双显或双隐。真要严控，得用 @media (min-width: 768px) and (max-width: 991.98px) 这类带余量的写法，而不是依赖单一工具类。
