d-none等display类是响应式开关而非简单开关，因d-none含!important会全局压制后续同级类，必须前置并用断点类“反向激活”，如d-none d-md-block d-xl-none；d-flex默认横排因flex-direction:row，需加flex-column垂直堆叠；d-print-*类仅在打印预览生效。
d-none、d-block、d-flex 这类 display 工具类不是“开/关”开关，而是响应式开关——用错顺序或混搭冲突类，元素就直接消失，连调试都找不到原因。
为什么 d-none 加了断点类还是不显示？
根本原因是类名叠加逻辑被误解：d-none 是全局生效的，它会压过后面所有同级 display 类，除非后续类带断点且优先级更高。比如 d-none d-sm-block 在小屏（≥576px）不会显示，因为 d-none 已经把 display 设为 none，而 d-sm-block 的媒体查询只在满足条件时才尝试设为 block，但 CSS 优先级上它输给了前面无条件生效的 d-none。
正确写法必须把 d-none 放最前，再用带断点的类“反向激活”：
-
d-none d-md-block d-xl-none：仅在中屏（≥768px）和大屏（≥992px）显示，超小屏和超大屏都隐藏 - 别写
d-sm-block d-none—— 后者无条件覆盖前者 - 检查是否被自定义 CSS 里写了
display: none !important干扰，可用浏览器 DevTools 的“Computed”面板看最终生效值
d-flex 为什么默认横排？怎么让它竖着堆？
d-flex 对应的是 display: flex，而 Flexbox 默认 flex-direction: row，所以子元素水平排列。这不是 Bootstrap 的 bug，是 CSS 规范行为。
要垂直堆叠，得显式加方向类：
-
d-flex flex-column→ 垂直主轴，子项从上到下 -
d-flex flex-column-reverse→ 倒序垂直 - 如果用了
d-inline-flex，同样需配flex-column才能竖排 - 注意：
flex-column不会自动让子项占满高度，需额外加h-100或flex-grow-1控制伸缩
什么时候不该用 d-table 系列？
d-table、d-table-cell 是为兼容老布局模拟表格行为设计的，在现代项目里基本没优势，还容易出问题：
-
d-table-cell单独加在元素上完全无效，必须配合d-table父容器，否则浏览器根本不识别 - 语义混乱：用 table 类实现非表格内容，影响可访问性和 SEO
- 响应式困难：
d-table不支持断点类（如d-md-table），无法做响应式表格切换 - 替代方案更干净：
d-flex+flex-wrap或网格系统row-cols-*更可控、更轻量
d-print-* 类为什么屏幕上看不见效果？
因为 d-print-none、d-print-block 只在 @media print 上下文中生效，浏览器普通渲染时完全忽略它们。这是故意设计，不是失效。
验证方法只有两种：
- 按
Ctrl+P（或Cmd+P）打开打印预览，观察元素是否按预期隐藏/显示 - 在 DevTools 的 Rendering 面板里启用 “Emulate CSS media” → 选 “print”，此时页面会模拟打印样式渲染
- 别试图在屏幕样式里调试它——它本就不该在那里起作用
真正难的不是记住哪些类存在，而是理解它们背后是媒体查询 + CSS 优先级 + Flexbox 默认行为三重叠加。一个 d-none 写错位置，整个模块就消失；一个 d-flex 忘加 flex-column，列表就横着溢出屏幕——这些都不是框架缺陷，而是你跟 CSS 的约定没对齐。
