bootstrap 5默认不包含@media print规则，必须手动补全；内置.d-print-*类无媒体查询包裹即无效，需显式引入print样式或自定义@media print覆盖导航栏、表格、按钮等非内容元素。
Bootstrap 5 默认不生效，必须手动补 @media print
Bootstrap 5（含 5.3+）在 bootstrap.min.css 中已彻底移除所有 @media print 规则——这不是 bug，是设计选择。升级项目时若发现打印预览里导航栏、侧边栏、彩色背景全在，不是你漏写了样式，是框架根本没提供。
关键点：内置的 .d-print-none、.d-print-block 等类本身只是声明 display 值，**不带 @media print 包裹就完全无效**。它们只在你手写或引入了对应媒体查询后才起作用。
- 用 CDN 时，必须额外加一段
@media print { ... }，否则.d-print-*类等于摆设 - 用 Sass 构建时，需确认
$enable-print-styles: true，并显式@import "bootstrap/scss/utilities/_print" -
bootstrap-reboot.css（哪怕 5.3+）也不含打印重置，别指望它兜底
哪些元素必须显式隐藏，不能靠“默认不打”
浏览器不会自动过滤交互组件或布局容器，所有非内容区域都得你点名关掉。常见漏网之鱼包括：
-
.navbar、.sidebar、.ads、.footer-cta—— 它们在纸上毫无意义 -
.btn、.dropdown-toggle、.icon-print—— 打印不需要点击 -
.d-none类本身在 print 下无效，它只响应屏幕断点；要隐藏就得写@media print { .d-none { display: none !important; } } - 动态插入的内容（如
.toast、.modal）若没在@media print里覆盖，会原样输出
别用 visibility: hidden 或 opacity: 0 替代 display: none——前者仍占文档流，可能撑出空白页。
表格、分页、字体这些细节最容易翻车
Bootstrap 的 .table-bordered 在打印时边框常变虚或消失，因为浏览器默认忽略部分 border-color 和背景色。表格内容被截断、跨页错乱也极常见。
- 强制重置表格边框：
@media print { .table-bordered th, .table-bordered td { border: 1px solid #000 !important; } } - 防分页断裂：
@media print { table, pre, blockquote { break-inside: avoid !important; } } - 字号底线：
body { font-size: 12pt !important; }（小于 12px 在 A4 纸上难读） - 禁用浮动和 flex 异常：
@media print { * { float: none !important; display: block !important; } }，避免多列挤成窄条
注意：@page { size: A4; margin: 2cm; } 可控纸张尺寸，但 Chrome 对它的支持不稳定；优先用 padding 和 max-width 控制内容区域更可靠。
调试时怎么快速验证规则是否真生效
别反复点 Ctrl+P 测试，直接用 Chrome DevTools 的模拟功能：
- 打开 DevTools → ⋮ → More tools → Rendering → 勾选
Emulate CSS media: print - 页面即刻渲染为打印样式，改完 CSS 刷新就能看效果
- 用
@media print { * { outline: 1px solid red !important; } }临时标出所有未被隐藏的元素 - 右键目标元素 → “Inspect” → 查看 “Computed” 面板里的
display值，确认是不是真成了none
真正难的不是写规则，而是接受浏览器打印能力的边界：CSS 页码（counter()）、精确分页、页眉页脚注入，在 Chrome 上依然受限严重，Firefox/Edge 支持稍好但也不稳定。先保证内容可读、不浪费墨、不丢信息，再谈美化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
