d-none在所有断点和媒介（含打印）下均生效，等价于@media all { .d-none { display: none !important; } }；需“屏幕隐藏、打印显示”时应组合使用d-none d-print-block。

Bootstrap 5 中 d-none 在屏幕和打印时都生效

d-none 是 Bootstrap 5 的响应式显示工具类，它在所有断点（xs 到 xxl）和所有媒介（screen、print）下都设为 display: none !important。这意味着：即使你用浏览器「打印预览」，该元素也不会出现。

常见误用场景是想「只在屏幕上隐藏，打印时显示」——这时 d-none 就不适用，必须换用更精确的类。

• 它等价于 CSS 规则：@media all { .d-none { display: none !important; } }
• 无法通过添加其他断点前缀（如 md-d-none）来“恢复打印可见性”，因为 d-print- 系列是独立控制逻辑
• 若需仅在屏幕隐藏、打印保留，请跳到下一节处理

d-print-none 只在打印时隐藏，对屏幕无影响

d-print-none 是 Bootstrap 5 专为打印媒介设计的类，它只在 @media print 下生效，屏幕浏览时完全不干预元素显示状态。

VPS Bootstrap

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

下载

典型使用场景：报表页面中，导航栏、按钮、广告位这些对打印无意义的内容，可在打印时隐藏，但用户正常浏览时仍可见。

• 它等价于：@media print { .d-print-none { display: none !important; } }
• 可与其他显示类组合使用，例如： d-block d-print-none → 屏幕上块级显示，打印时隐藏
• 注意：它不会覆盖 d-none；如果同时写 d-none d-print-none，打印时仍是隐藏（因为 d-none 已全局生效）

如何实现「屏幕隐藏、打印显示」？

Bootstrap 5 没有内置的 d-screen-none 类，所以不能靠单一类实现「仅屏幕隐藏」。必须组合使用现有工具类或自定义 CSS。

• 推荐方式：用 d-none d-print-block（或 d-print-inline 等）
  → d-none 先隐藏所有媒介，d-print-block 在打印时重置为 block
• 等效自定义 CSS（如需复用）：

  @media print {
    .d-screen-only { display: block !important; }
  }
  @media screen {
    .d-screen-only { display: none !important; }
  }

• 注意顺序无关紧要，因为两个类的 CSS 选择器权重相同，但浏览器按后声明的规则覆盖（建议把 d-print-* 放后面，确保生效）

容易被忽略的兼容性与调试细节

打印样式常被忽视，但实际交付中出错率高。几个关键点：

• Chrome 打印预览默认启用「背景图形」选项关闭，导致 background-color 或图片不显示 —— 这和 d-print-none 无关，但常被误判为类没生效
• d-print-none 在 Firefox 和 Safari 的打印预览中行为一致，但在某些旧版 Edge（Chromium 之前）可能不支持，如需兼容请加降级 CSS
• 检查是否误用了 d-none d-md-block 这类组合：它在 md 及以上屏幕显示，但打印时仍被 d-none 覆盖 —— 若想打印也显示，必须显式加 d-print-block