Bootstrap 4 中需用 d-{breakpoint}-none 控制响应式隐藏，如 d-md-none 表示 ≥768px 时隐藏；断点按最小视口宽度划分：sm≥576px、md≥768px、lg≥992px、xl≥1200px。
用 d-{breakpoint}-none 控制隐藏，不是 hidden-*
Bootstrap 4 已彻底移除 hidden-xs、visible-lg 这类旧类名，写了也不生效。必须改用 d- 前缀的 display 工具类。比如想在中等屏（≥768px）隐藏某个 <div>，就加 <code>d-md-none，而不是 hidden-md。
常见错误是复制 Bootstrap 3 的写法，或者查文档时没注意版本——Bootstrap 4 的断点定义和类名体系已重构，混用会导致元素始终显示或始终消失。
d-none 必须配合断点类使用，不能单独依赖
单写 d-none 会让元素在所有尺寸下都不可见，后续加的 d-md-block 也无效，因为 d-none 的 CSS 优先级会覆盖它（除非你手动提高 specificity 或用 !important，但不推荐）。
正确做法是「先隐后显」或「先显后隐」，取决于目标场景：
立即学习“前端免费学习笔记（深入）”；
- 只在小屏显示（如手机端导航）：用
d-block d-sm-none（默认显示，≥576px 隐藏） - 只在大屏显示（如侧边栏）：用
d-none d-lg-block（默认隐藏，≥992px 显示） - 仅在 576–767px 显示（窄屏手持设备）：用
d-none d-sm-block d-md-none
断点值对应的实际宽度容易记错
Bootstrap 4 的断点不是按设备类型命名，而是按视口最小宽度划分：
-
sm：≥576px（覆盖横屏手机、小平板） -
md：≥768px（典型平板竖屏起） -
lg：≥992px（桌面显示器起） -
xl：≥1200px（超宽屏）
所以 d-sm-none 不是“在手机上隐藏”，而是在 ≥576px 时隐藏——这意味着竖屏手机（通常 d-none d-md-block（全隐，只在 ≥768px 显），而不是误以为 d-sm-none 就能搞定手机。
隐藏 ≠ 视觉不可见，d-none 会彻底退出布局流
d-none 对应的是 display: none，元素不渲染、不占位、不触发点击、不影响父容器高度。这和 visibility: hidden 或 opacity: 0 有本质区别——后者仍占据空间，可能撑开 row、干扰栅格对齐、甚至挡住下方可点击区域。
特别注意：如果被隐藏的是 col，且父 row 是 flex 布局（Bootstrap 4 默认），d-none 会让该列完全脱离 flex 计算，剩余列会自动均分剩余宽度——这是预期行为，但容易被当成“错位”误判。
