.d-none 是全局隐藏类，需前置并叠加断点类（如 .d-md-block）实现响应式显示；打印样式用 .d-print-*；.d-inline-block 在下拉菜单中易失效，推荐用 .d-flex 容器；.d-flex 默认水平排列，需 .flex-column 恢复垂直堆叠；少用 .d-table 系列，避免语义与响应问题。
如何用 .d-none 精确控制元素在不同断点的显示/隐藏
Bootstrap 的 display 类不是简单开关，而是响应式开关。比如 .d-none.d-md-block.d-xl-none 表示：在超小屏（xs）和小屏（sm）下隐藏，在中屏（md）和大屏（lg）下显示，到超大屏（xl）又隐藏——它靠的是断点类的叠加优先级，而不是“覆盖”逻辑。
- 断点类如
.d-sm-block只在 ≥576px 时生效，.d-md-none只在 ≥768px 时让元素消失，两者可共存； - 别写
.d-none .d-sm-block试图“先全隐再局部显”，因为.d-none是全局生效的，会压过后续断点类——必须把.d-none放在最前面，再用带断点的类“反向激活”； - 打印样式有独立支持：
.d-print-none和.d-print-block，它们只在浏览器打印预览或@media print中起作用，不影响屏幕显示。
为什么给按钮加 .d-inline-block 有时没反应
在下拉菜单（.dropdown-menu）里，.dropdown-item 默认是 display: block，但它的父容器（.dropdown-menu）本身是 position: absolute + display: block，且内部有默认 padding/margin，直接加 .d-inline-block 到 <button> 或 <a> 上往往无效——因为父级未设 white-space: nowrap，子元素 inline-block 仍可能被换行；更关键的是，某些版本 Bootstrap 对 .dropdown-item 做了 flex 包裹或 width: 100% 锁定。
- 最稳妥的做法：把要并排的按钮放在一个
<div class="d-flex">容器里，再用.gap-2控制间距； - 如果必须用
.d-inline-block，得确保父容器没有display: flex或text-align: center干扰对齐； - 遇到失效，临时加
style="display: inline-block !important;"能验证是否是 CSS 优先级问题——但上线前务必改回类名方案，避免维护隐患。
.d-flex 一加就错：垂直堆叠变水平排列的真相
很多开发者发现，给一个包含 <h1> 和 <form> 的容器加上 .d-flex 后，标题和表单挤成一行了。这不是 bug，是 Flexbox 的默认行为：flex-direction: row。
- 想让它恢复“上下排列”，必须显式加
.flex-column（对应flex-direction: column）； - 注意
.d-flex不会自动重置子元素的width或margin，所以如果子项本身是width: 100%的<div>，加了.flex-column后依然会撑满宽度——这不是 display 问题，是尺寸控制问题； - 别混用
.d-flex和.d-table或.d-grid，它们底层渲染模型冲突，浏览器会按 CSS cascade 规则丢弃后者。
哪些 display 类实际用得少，但容易误用
.d-table、.d-table-cell 这类模拟表格布局的类，在现代 Bootstrap 项目中极少需要。它们存在，是为了兼容老式语义缺失结构，但代价明显：破坏语义、难以响应、与 flex/grid 冲突。
-
.d-table-cell必须配合.d-table父容器才有效，单独加没意义； -
.d-inline-flex和.d-flex的区别仅在于块级/内联级容器，但多数场景下，你真正要控制的是内容排列，而不是容器自身在文档流中的表现——优先选.d-flex+.justify-content-*； -
.d-none在 JS 动态显示时要小心：它等价于display: none，会触发重排（reflow），频繁切换影响性能；若只是视觉隐藏，考虑visibility: hidden或opacity: 0配合pointer-events: none。
display 类看着简单，但断点叠加顺序、父容器约束、与其他布局类（如 flex、float）的互斥关系，才是实际卡点所在。别背类名，盯住浏览器 DevTools 里的 computed styles，看最终生效的是哪条规则——那才是你该修的地方。
