Bootstrap 5 中没有 col-sm-none 类，正确隐藏类为 d-sm-none；col- 控制列宽布局，d- 控制显隐，二者独立，d-sm-none 表示在 ≥576px 时设 display: none。
Bootstrap 5 中没有 col-sm-none 这种写法
直接写 col-sm-none 不会生效，css 里根本不存在这个类。bootstrap 的栅格列定义（col-sm-6）和显示控制（d-sm-none）是两套独立系统：col-* 只管宽度和布局分配，d-* 才管显隐。
常见错误现象：加了 col-sm-none 后元素照常显示，控制台也查不到对应样式规则；或者误以为它能“让 sm 断点下的列消失”，结果发现只是列宽没变、内容还在。
-
col-sm-6表示“在 ≥576px 时占 6 列”，它不控制 display - 真正隐藏要用
d-sm-none（≥576px 时设display: none） - 想“仅在 sm 屏隐藏、其他尺寸显示”，得组合写：
d-none d-sm-block d-md-none（先全隐，sm 显，md 及以上再隐）
d-{breakpoint}-none 的断点触发逻辑容易误解
d-sm-none 不是“在小屏隐藏”，而是“在视口 ≥576px 时隐藏”——也就是说，手机竖屏（通常 360–414px）完全不受影响，元素依然可见。
典型踩坑场景：你希望“只在桌面显示”，却写了 d-md-none，结果发现 iPad 横屏（1024px）也没隐藏，手机上反而更显眼。
- xs 断点（0–575.98px）无前缀类，
d-none是唯一覆盖它的隐藏方式 - 要覆盖手机端，必须显式用
d-none d-md-block（默认隐藏，≥768px 才显示） - 别依赖
d-sm-none实现“手机隐藏”——它在 xs 下压根不匹配，无效 - 断点值固定：
sm= ≥576px，md= ≥768px，lg= ≥992px，不能靠改类名绕过
禁用某个断点的栅格行为，不能只靠 HTML 类
比如你想让 .col-md-4 完全不生效（即 768px 起也不分栏），只保留 sm 和 lg 的响应逻辑——这不是删掉 class 就行的事，得从 CSS 层面让对应媒体查询失效。
直接写 @media (min-width: 768px) { .col-md-4 { ... } } 很可能被 Bootstrap 编译后的高优先级规则覆盖，尤其当你的 CSS 在 bootstrap.min.css 之前加载时。
- 必须确保自定义 CSS 在
bootstrap.min.css之后引入 - 要复制 Bootstrap 原始断点值，例如：
@media (min-width: 768px) { .col-md-4 { flex: none; max-width: 100%; } } - 如果还用了
.col-lg-3，得同步补上@media (min-width: 992px)规则，否则布局错位 - 边界像素点易冲突，建议加
and (max-width: 991.98px)避免 992px 处双规则竞争
隐藏后布局塌陷问题常被忽略
d-{breakpoint}-none 用的是 display: none，元素彻底脱离文档流。这在栅格里通常是期望行为（同级列自动填满），但在 flex 或 grid 容器中可能引发意外坍缩。
比如一个 col-md-4 加了 d-md-none，父容器是 d-flex，隐藏后父容器高度可能归零——因为 flex 项目没了，又没设 min-height 或 flex-shrink: 0。
- flex 容器里隐藏子项，记得检查是否需要
flex-grow-0或align-self-start锚定位置 - grid 布局中，
display: none会让该格子消失，但grid-template-areas不会重排，可能留空 -
invisible类不是替代方案——它用visibility: hidden，仍占位、仍参与布局计算，和d-none语义完全不同 - IE11 兼容性注意：
d-xxl-flex在 IE 下会退化为display: block，别指望它真起 flex 作用
