Bootstrap框架中常用的Display显示属性类-Bootstrap教程-PHP中文网

.d-none 是全局隐藏类，需前置并叠加断点类（如 .d-md-block）实现响应式显示；打印样式用 .d-print-*；.d-inline-block 在下拉菜单中易失效，推荐用 .d-flex 容器；.d-flex 默认水平排列，需 .flex-column 恢复垂直堆叠；少用 .d-table 系列，避免语义与响应问题。

bootstrap框架中常用的display显示属性类

如何用 `.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></button> 或 <a></a> 上往往无效——因为父级未设 white-space: nowrap，子元素 inline-block 仍可能被换行；更关键的是，某些版本 Bootstrap 对 .dropdown-item 做了 flex 包裹或 width: 100% 锁定。

最稳妥的做法：把要并排的按钮放在一个 <div class="d-flex"> 容器里，再用 <code>.gap-2 控制间距；
如果必须用 .d-inline-block，得确保父容器没有 display: flex 或 text-align: center 干扰对齐；
遇到失效，临时加 style="display: inline-block !important;" 能验证是否是 CSS 优先级问题——但上线前务必改回类名方案，避免维护隐患。

`.d-flex` 一加就错：垂直堆叠变水平排列的真相

很多开发者发现，给一个包含 <h1></h1> 和 <form></form> 的容器加上 .d-flex 后，标题和表单挤成一行了。这不是 bug，是 Flexbox 的默认行为：flex-direction: row。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

想让它恢复“上下排列”，必须显式加 .flex-column（对应 flex-direction: column）；
注意 .d-flex 不会自动重置子元素的 width 或 margin，所以如果子项本身是 width: 100% 的 <div>，加了 <code>.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。