Bootstrap 5 默认不加载打印样式，bootstrap.min.css 中已移除所有 @media print 规则；若需打印控制，须手动引入或手写规则，如通过 @media print 隐藏非内容元素、重置颜色等。
Bootstrap 的 print 媒体查询默认是否启用
Bootstrap 5 默认**不加载打印样式**，bootstrap.min.css 中已移除所有 @media print 规则。这是和 Bootstrap 4 的关键区别——如果你从旧项目升级，会发现打印时布局崩乱、颜色未重置、侧边栏/导航仍显示，不是 bug，是设计变更。
原因很实际：多数 Web 应用不需要复杂打印控制；强制内置反而增加 CSS 体积、干扰自定义逻辑。官方建议按需引入或手写规则。
- 若用 Sass 源码构建，可导入
bootstrap/scss/_print.scss（需确保变量$enable-print-styles为true） - 若仅用 CDN，得手动补一段精简的
@media print块，或引入第三方打印 CSS - 注意：Bootstrap 5.3+ 的
bootstrap-reboot.css里也**不含打印重置**，别指望它自动处理
最简可用的打印样式怎么加（兼容 Bootstrap 5）
不用全量引入，几行 CSS 就能解决 90% 打印问题：隐藏非内容元素、重置颜色、展开折叠内容、固定宽度。以下代码可直接塞进 或独立 print.css：
@media print {
body { font-size: 12pt; color: #000; background: #fff; }
.navbar, .sidebar, .btn, .alert, .badge, .d-none { display: none !important; }
.d-print-block { display: block !important; }
.d-print-inline { display: inline !important; }
.d-print-inline-block { display: inline-block !important; }
a[href]:after { content: " (" attr(href) ")"; font-size: 9pt; }
img { max-width: 100% !important; height: auto; }
}
关键点：
-
.d-print-*是 Bootstrap 5 内置的打印响应类，但需配合上面的媒体查询才能生效（它们本身只是display声明，无@media包裹） -
a[href]:after补链接地址，避免打印时“点击此处”变空白 - 不要用
!important覆盖太多，优先靠选择器权重控制，否则调试困难
为什么 display: none 在打印时可能失效
常见现象：明明写了 .sidebar { display: none; }，打印预览里它还在。根本原因是 CSS 层叠顺序或作用域问题：
- 组件库（如 React 的
Modal或 Vue 的Dialog）可能用position: fixed+z-index动态插入 DOM，脱离常规文档流，导致打印样式未命中 - 某些框架（如 Next.js）服务端渲染时未注入打印 CSS，客户端才加载，造成打印触发时样式未就绪
- 浏览器打印预览缓存了旧样式，尤其 Chrome 对
@media print缓存较激进，改完 CSS 后要清空打印预览再试，不能只刷新页面
验证方式：打开浏览器打印预览 → 右键检查元素 → 切换到 Styles 面板，确认对应规则是否被划掉（strikethrough）或灰色禁用。
打印 PDF 时字体和间距异常怎么办
浏览器生成 PDF 本质是“快照”，不执行 JS、不加载远程字体、忽略部分 CSS（如 transform、flex-wrap）。典型症状：中文乱码、行高塌陷、图标消失。
- 中文字体务必用系统自带或已内联的字体栈，例如：
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;，避免引用 Google Fonts 或@font-face远程 URL - 用
line-height: 1.4替代rem或em单位，防止缩放失真 - 图标（Font Awesome 等）建议替换为 SVG 内联或 base64 图片，CSS
::before生成的内容在 PDF 中常丢失 - 表格列宽崩溃？给
table加table-layout: fixed，并为每列设width（百分比或 px），别依赖auto
真正难搞的是跨页分页——page-break-inside: avoid 在 Bootstrap 的 .card 或 .accordion 上效果不稳定，得结合 break-before/break-after 和容器高度预估来硬控。
