.d-none 单独使用会在所有尺寸下隐藏元素，因其含 !important 会覆盖无 !important 的响应式显示类；正确做法是避免混用，改用纯响应式组合如 .d-md-block .d-lg-flex。
为什么 .d-none 在某些断点下不生效？
Bootstrap 的 .d-none 是个“全屏隐藏”兜底类，但它本身不带响应式前缀——单独用它，会在所有尺寸下都隐藏元素。真要实现“仅在小屏隐藏、大屏显示”，必须搭配断点前缀，比如 .d-sm-block 或 .d-md-flex。
常见错误现象：div 加了 .d-none，又加 .d-lg-block，但大屏还是看不见——因为 CSS 层叠顺序里，.d-none（来自 display: none !important）优先级更高，直接覆盖了后面的响应式显示类。
- 响应式显示类（如
.d-md-block）只在对应断点及以上生效，且不带!important -
.d-none默认带!important，所以它会压制后面没加!important的同类规则 - 正确写法是：避免混用
.d-none和带前缀的显示类，改用纯响应式组合，例如：.d-none .d-md-block→ 错；.d-md-block .d-lg-flex→ 对（小屏默认可见，中屏起块级，大屏起弹性）
.d-{breakpoint}-{value} 的取值逻辑和兼容性坑
.d- 系列类名的完整格式是 .d-{breakpoint}-{value}，其中 {breakpoint} 是 sm/md/lg/xl/xxl，{value} 是 none/block/inline/flex/grid 等。
使用场景：需要在某个断点「切换布局模式」，比如移动端用 block 堆叠卡片，桌面端改用 flex 横向排列。
参数差异：
-
.d-sm-none：仅在sm（≥576px）及以上隐藏 -
.d-sm-block：仅在sm及以上设为block，更小尺寸保持原有 display（可能为 inline 或未定义） - Bootstrap 5.3+ 支持
grid和contents，但 IE 完全不支持，contents在 Safari 15.4 之前也有渲染异常
性能影响极小，但过度嵌套响应式类（如同时写 .d-none .d-sm-block .d-md-flex .d-lg-grid）会让 HTML 冗长，且增加 CSS 匹配开销——实际只需覆盖目标区间即可。
如何安全地在 JS 动态控制 .d- 类的显隐？
直接用 element.classList.add('d-none') 没问题，但要注意：如果元素原本有 .d-md-block，加 .d-none 后，由于 !important，它会彻底隐藏，哪怕窗口缩放到 md 以上。
容易踩的坑：
- 不要用
classList.toggle('d-none')单独控制，容易和响应式类冲突 - 推荐做法：统一用响应式类控制，JS 只操作「开关类」，例如定义自定义类
.is-hidden-mobile，再配合媒体查询或 JS 切换 - 更稳妥的是：JS 中用
setAttribute('style', 'display: none')覆盖，但记得清理内联样式，否则会干扰响应式类
示例（安全切换）：
element.classList.remove('d-none', 'd-sm-block', 'd-md-flex');
element.classList.add('d-sm-none', 'd-md-block');
这比反复增删 .d-none 更可控，也符合响应式设计本意。
自定义断点时，.d- 类不会自动继承
如果你在 Sass 中修改了 $grid-breakpoints，新增了 hd 断点，那么 .d-hd-flex 这类类名不会自动生成——Bootstrap 的 .d- 工具类只基于内置断点生成。
这意味着：
- 即使你写了
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px, hd: 2560px) - 也必须手动在 SCSS 中调用
@include utilities-display()或重写display工具类生成逻辑 - 否则编译后的 CSS 里根本没有
.d-hd-*，浏览器会忽略该类
这个点很容易被忽略，尤其在团队协作中——别人看到你用了 .d-hd-flex 却不生效，第一反应常是“是不是写错了”，而不是“构建流程漏了工具类生成”。
事情说清了就结束。
