Bootstrap 4 中 hidden-xs 不存在，正确写法是 d-{breakpoint}-none；xs 断点无 d-xs-none，需用 d-none d-sm-block 等组合实现响应式隐藏。
hidden-xs 在 Bootstrap 4 中根本不存在
这不是“失效”，而是它压根没被实现——hidden-xs 是 Bootstrap 3 的类名，v4 彻底移除了所有 hidden-* 响应式工具类。如果你在 v4 项目里写了 hidden-xs，浏览器会完全忽略它，CSS 规则不匹配、无任何效果。
Bootstrap 4/v5 正确的隐藏写法是 d-*-none
v4 和 v5 统一改用 d-{breakpoint}-none 控制显示/隐藏，语法更一致，也支持更多组合（比如 d-none d-md-block 表示“默认隐藏，≥768px 显示”）。
-
d-none：所有断点都隐藏（相当于全局display: none） -
d-sm-none：≥576px 隐藏（注意：576px 已超出多数竖屏手机宽度，慎用） -
d-lg-none：≥992px 隐藏（适合“只在手机显示”的场景）
别再套用 v3 的思维去猜类名；查官方文档比试错快得多。
为什么加了 d-*-none 还是没隐藏？
常见不是类名写错，而是 CSS 优先级或 DOM 结构干扰：
- 自定义样式里用了
display: block !important或display: flex !important，会直接覆盖d-*-none - 元素被包在
.container-fluid或.col里，这些类自带padding/flex行为，可能让“隐藏”视觉上不明显（比如留白还在） - 用 DevTools 看 computed 样式，确认最终生效的是
display: none，而不是被其他规则顶掉了
xs 断点没有 d-xs-* 类，这是有意设计
Bootstrap 4/v5 中，xs 是“默认断点”，即无前缀的类（如 d-block、col）就作用于 xs。所以不存在 d-xs-none——你要“只在手机隐藏”，就得用 d-none d-sm-block（默认隐藏，≥576px 才显示），但要注意：576px 是很多横屏手机和小平板的宽度，实际中常改用 d-none d-md-block 或 d-none d-lg-block 更稳妥。
真正竖屏手机（360–414px）属于 xs 范围，但 xs 没有独立的 display 工具类，这点容易误判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
