bootstrap 4/5 中没有 col-sm-none 类，因其不符合响应式工具类命名规则；正确隐藏类为 d-sm-none，用于在小屏及以上设 display: none。
Bootstrap 4/5 里没有 col-sm-none 这个类，直接写会完全无效 —— 它既不是官方类名，也不符合 Bootstrap 的响应式工具类命名规则。
为什么 col-sm-none 不生效？
Bootstrap 的栅格隐藏类是独立于 col-* 的，且命名统一为 d-{breakpoint}-none（d 表示 display）。col-sm-none 混淆了栅格列定义（col-sm-*）和显示控制逻辑，CSS 里根本不存在这个样式声明。
-
col-sm-6是定义列宽，只在sm及以上生效，不影响display - 真正控制“隐藏”的是
d-sm-none（在sm及以上断点设为display: none） - Bootstrap 4+ 不再支持
hidden-sm这类旧类名，全部迁移到d-*-*系统
正确写法：用 d-sm-none 实现“在小屏及以上隐藏”
如果你希望某个元素在 sm（≥576px）及更大屏幕下不显示，就用 d-sm-none；如果想“仅在小屏隐藏、其他尺寸显示”，还要配合 d-none d-sm-block 这类组合。
- 隐藏所有尺寸：
d-none - 仅在
sm及以上隐藏：d-sm-none - 仅在
sm显示，其他尺寸隐藏：d-none d-sm-block - 想在
md隐藏但sm和lg都显示？不行 ——d-md-none会同时影响lg，必须写成d-sm-block d-md-none d-lg-block
示例：
<div class="row"> <div class="col-12 col-sm-6">左侧内容</div> <div class="col-12 col-sm-6 d-sm-none">这个在 ≥576px 屏幕上消失</div> </div>
Bootstrap 3 用户注意：别套用老写法
Bootstrap 3 有 hidden-sm，但它在 v4/v5 中已被移除。如果你项目还在用 v3，可以继续用；但只要升级到 v4+，就必须换成 d-sm-none，否则样式不会应用。
- v3：
hidden-xs/hidden-sm/hidden-md/hidden-lg - v4/v5：
d-none/d-sm-none/d-md-none/d-lg-none/d-xl-none/d-xxl-none - 别混用，比如
d-sm-none hidden-xs—— 后者在 v4+ 是无意义的冗余代码
容易被忽略的细节：隐藏 ≠ 列宽归零
d-sm-none 是让元素从渲染流中彻底移除，它的父容器（比如 .row）会重新计算剩余子项布局；而如果你误用 col-sm-0 或 col-sm-auto，元素还在 DOM 里占位或撑开空白，视觉效果完全不同。
- 要“消失且不占空间”，必须用
d-*-none - 要“宽度为零但仍存在”，得靠
col-sm-0+ 自定义 CSS（如width: 0 !important），但这不是响应式隐藏的本意 - JavaScript 检测元素是否可见时，
getComputedStyle(el).display === 'none'才能捕获d-sm-none的效果
响应式隐藏的本质是 display 控制，不是栅格列配置 —— 把这两层逻辑分开理解，就很少再写错 col-sm-none 这种不存在的类了。
