bootstrap 5 默认移除所有打印样式，需手动启用；必须通过独立 print.css 或 sass 配置 $enable-print-styles: true 并导入 _print.scss；工具类如 d-print-none 仅在自定义 @media print 中生效，且需配合 !important 和高特异性选择器确保覆盖。
Bootstrap 5 的 @media print 必须手动启用
Bootstrap 5 默认**不包含任何打印样式规则**，bootstrap.min.css 中已彻底移除所有 @media print 块。这不是遗漏，而是有意为之：减小体积、避免干扰自定义逻辑。如果你从 Bootstrap 4 升级过来，会发现导航栏、侧边栏、按钮全在打印预览里出现——不是 bug，是框架行为变更。
必须显式引入或手写规则。最稳妥的方式是单独创建 print.css，并通过 <link rel="stylesheet" media="print" href="print.css"> 加载，确保它在 Bootstrap CSS 之后加载。
- 不要把打印样式混进主 CSS 文件里，容易被覆盖或误触发
- 若用 Sass 构建，需确认
$enable-print-styles: true，并导入bootstrap/scss/_print.scss - CDN 用户只能手写，别指望
bootstrap-reboot.css或bootstrap-grid.css提供打印重置
.d-print-none 类只在 @media print 内生效，且仅控制 display
.d-print-none、.d-print-block 这类工具类本身只是声明 display: none !important 等，它们**不带 @media print 包裹**——也就是说，这些类只有在你自己的 @media print 规则里被引用时才起作用。Bootstrap 5.3+ 才完整支持这套类名；5.2 及更早版本需手动补：
@media print {
.d-print-none { display: none !important; }
.d-print-block { display: block !important; }
}
-
.d-print-none在屏幕下完全无效，不能当“响应式隐藏”用 - 它只改
display，不处理visibility、opacity、position: fixed插入的浮层（如 Modal、Tooltip） - 如果元素同时有
.navbar和.d-print-none，而.navbar的样式权重更高，d-print-none就会被覆盖
隐藏非内容元素要加 !important + 高权重选择器
常见现象：写了 .sidebar { display: none; }，打印预览里它还在。根本原因不是语法错，而是 Bootstrap 5 的打印兜底规则（如 body * { visibility: hidden }）或组件库动态插入的 DOM（如 React Modal）脱离了常规流，导致普通选择器无法命中。
安全做法是用高特异性 + !important，并放在自定义打印 CSS 的末尾：
@media print {
.no-print,
.navbar,
.sidebar,
.btn,
.alert,
.ad-banner {
display: none !important;
}
/* 强制展开折叠内容 */
.collapse.show { display: block !important; }
/* 修复 flex 布局崩坏 */
.row, .col, .d-flex { display: block !important; }
}
- 避免只写
.no-print { display: none }——没!important很可能被覆盖 - 别依赖
visibility: hidden，它仍占布局空间，打印时可能留白 -
position: fixed的页眉/页脚需额外处理，否则可能每页都重复出现
调试打印样式别只靠 Ctrl+P 预览
Chrome 的“打印预览”和真实输出常不一致，尤其涉及分页、字体、背景色时。更高效的方式是开启 DevTools 的媒体模拟：
- 按
Ctrl+Shift+P（Win）或Cmd+Shift+P（Mac），输入Rendering→ 启用Emulate CSS media type: print - 这样能在普通页面上实时看到效果，无需反复点“打印”
- 检查
Computed面板里的display值，确认最终生效的是哪条规则 - 对表格敏感的内容，记得给
<thead> 加 <code>display: table-header-group，否则跨页无表头真正麻烦的从来不是写几行
@media print，而是处理那些“本该消失却还在”的元素——它们往往藏在第三方组件、内联样式或动态插入的 DOM 里，得一层层 inspect 才能揪出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
