最可靠方法是手写@media print规则设display: none；Bootstrap无默认打印工具类，d-print-*需手动启用$enable-print-styles；调试用Chrome Rendering面板模拟print媒介。
打印时隐藏元素用 @media print 最可靠
Bootstrap 自身不提供专门的打印可见性工具类（比如 print-d-none），直接依赖其响应式类（如 d-none）在打印时往往失效——因为 d-none 是作用于所有媒介的，而浏览器打印预览默认使用屏幕样式表，除非显式覆盖。
真正可控的方式是手写 @media print 规则，针对性设置 display: none 或 visibility: hidden。注意：优先用 display: none，它能彻底移除元素布局空间；visibility: hidden 仍占位，可能影响分页。
-
display: none在打印中 100% 隐藏且不占空间，推荐用于按钮、导航栏、广告位等 - 避免只靠
class="d-none d-print-block"这类组合——Bootstrap 5 的d-print-*类仅在部分版本中存在，且需确认是否引入了 print utilities（默认未启用） - 如果用了 Sass 版本 Bootstrap，可检查是否启用了
$enable-print-styles: true，否则d-print-类根本不会被编译出来
display: none 在 @media print 中为何有时无效？
常见原因是 CSS 优先级或规则被覆盖。比如某个组件内联了 style="display: block !important"，或第三方样式表里有更具体的打印规则。
解决办法不是堆 !important，而是提高选择器特异性或确保样式表加载顺序：
- 把打印样式放在所有其他 CSS 之后（包括 Bootstrap CSS）
- 用更具体的选择器，例如：
@media print { .app-header, .sidebar, .btn-print-hide { display: none !important; } } - 避免用 ID 选择器（如
#nav）——虽然有效，但不利于组件复用；改用语义化 class 更稳妥
需要打印时「显示」某元素？用 display: block 显式还原
有些元素默认在屏幕上隐藏（如 .print-only），但在打印时才需要出现。这时不能只依赖 display: none 屏幕样式，必须配合 @media print 主动设为可见：
.print-only {
display: none;
}
@media print {
.print-only {
display: block;
}
}
注意点：
- 若该元素原本是
inline元素（如span），打印时设display: block可能导致换行异常，可酌情用display: inline或display: inline-block - 不要依赖
visibility: visible替代display: block——如果父容器已是display: none，子元素设visible也无效 - 打印样式中慎用
position: fixed，多数浏览器会忽略它，导致页眉页脚错位
调试打印样式比想象中难：用 Chrome 的「Rendering」面板快速验证
浏览器打印预览（Ctrl+P）刷新慢、样式缓存顽固，改完 CSS 经常看不到效果。Chrome DevTools 的 Rendering 面板能实时模拟打印媒介：
- 打开 DevTools → ⋮ → More Tools → Rendering → 勾选
Emulate CSS media type→ 选print - 此时页面立即应用所有
@media print规则，可直接检查元素是否被隐藏、分页是否合理 - 特别注意分页断点：用
page-break-before: always或break-before: page控制内容起始位置，但需配合!important才能在某些场景生效
真正麻烦的是跨浏览器差异：Firefox 对 break-inside: avoid 支持更好，而 Chrome 在表格打印中容易把 thead 拆到下一页——这些细节没法靠一套 CSS 解决，得结合实际内容做微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
