正确写法是 class="d-none d-lg-block"：先用 .d-none 默认隐藏所有尺寸，再用 .d-lg-block 在 ≥992px 时显式启用显示，避免误用 .d-none .d-lg-block 顺序颠倒导致失效。
按钮在大屏显示、小屏隐藏的正确写法
bootstrap 本身没有“大屏显示、小屏隐藏”的单一类名，直接用 .d-none + .d-lg-block 是常见误用——它会让按钮在 lg 及以上显示，但 **在 xs/sm/md 也全都不显示**，因为 .d-none 会覆盖所有断点。真正要实现“仅大屏显示”，得用断点专属的显示类组合。
-
.d-none默认隐藏所有尺寸 -
.d-lg-inline（或.d-lg-block）只在 lg（≥992px）及更大屏幕生效，覆盖掉.d-none - 不需要额外写
.d-md-none等——因为.d-none已经设定了默认隐藏，只需在目标断点“显式启用”即可
为什么不用 .d-lg-block .d-none 顺序不重要？
Bootstrap 的 display 工具类是按 CSS 优先级和源码顺序生效的，但关键在于：所有 .d-* 类的 CSS 权重相同，后写的会覆盖前写的。所以 .d-none .d-lg-block 和 .d-lg-block .d-none 效果不同——后者会让 .d-none 覆盖掉 .d-lg-block，按钮永远不显示。
- 必须保证
.d-none在前，.d-lg-block在后（如：class="d-none d-lg-block"） - Bootstrap 5 中，断点类（如
d-lg-block）内部使用@media (min-width: 992px)，只在该范围内生效，不会影响其他尺寸 - 若用 Bootstrap 4，对应的是
hidden-sm-down等旧类，已废弃，不建议混用
响应式按钮的实际使用场景
比如导航栏里一个“后台入口”按钮，只希望桌面端显示，移动端收进折叠菜单；或者表格操作列的“编辑”按钮，在手机上因空间紧张需隐藏，靠操作菜单统一入口。
- 避免对同一按钮同时加
.d-none和多个断点显示类（如.d-lg-block .d-xl-inline），容易逻辑混乱 - 如果需要“仅在 xl 显示”，用
d-none d-xl-block；需要“lg 和 xl 显示”，就用d-none d-lg-block（因为 lg 包含 xl） - 注意按钮父容器是否设置了
flex-wrap: wrap或overflow: hidden，可能让隐藏/显示切换时出现布局抖动
调试时容易忽略的兼容性点
真机测试常发现按钮在 iPad 横屏（≈1024px）没显示，但开发工具里 lg 断点明明触发了——这是因为 Safari 对 device-width 的判定和 Bootstrap 的 min-width 基于 viewport 宽度，而非设备物理宽度。
- 确保页面有正确的 viewport meta：
<meta name="viewport" content="width=device-width, initial-scale=1"> - iPad 竖屏是 768px（属 md），横屏是 1024px（属 lg），但某些 iOS 版本下缩放或双击后 viewport 宽度可能被重设
- 用浏览器 DevTools 的 device toolbar 切换“Responsive”模式时，手动输入宽度（如 992）比选预设设备更可靠
断点逻辑看似简单，但 display 类的叠加规则、viewport 解析差异、以及父容器的 flex/gird 行为，三者一碰就容易出意料之外的结果。改完记得在真实小屏设备上点开控制台，检查元素 computed 样式里的 display 值是不是你预期的那个。
