bootstrap打印样式默认不友好，因其@media print几乎无优化，导致导航栏、侧边栏、阴影、彩色背景等全被打印，造成拥挤、耗纸、遮盖关键信息甚至浏览器卡死。
Bootstrap打印样式为什么默认不友好
Bootstrap的默认CSS在@media print下几乎没做针对性优化：导航栏、侧边栏、卡片阴影、彩色背景、图标字体（如fa-print）全会照常输出，导致打印出来内容拥挤、浪费纸张、关键信息被遮盖，甚至部分浏览器直接因CSS体积大而卡死预览。
如何用@media print精准覆盖Bootstrap样式
不要试图重写整个Bootstrap打印CSS，而是用更高优先级的选择器局部覆盖。关键是利用Bootstrap已有的类名结构，结合!important压制其默认规则（Bootstrap 5+的打印相关样式极少，多数需手动干预）：
- 隐藏非核心内容：
.navbar, .sidebar, .btn, .badge, .d-none-print { display: none !important; }（注意自定义.d-none-print便于维护） - 强制文本黑底白字：
body, p, li, td { color: #000 !important; background: transparent !important; }（避免深色背景吃墨） - 移除所有box-shadow和border-radius：
* { box-shadow: none !important; border-radius: 0 !important; }（通配符慎用，但打印场景可接受） - 确保表格可读：
table { border-collapse: collapse !important; width: 100% !important; }+th, td { border: 1px solid #333 !important; padding: 4px 6px !important; }
Bootstrap 5中print媒体查询的实际生效条件
Bootstrap 5本身只在极少数组件（如.visually-hidden）中隐含打印支持，且不提供独立print.css。它的@media print规则仅存在于源码的mixins/_breakpoints.scss中，用于生成.d-print-none等工具类——但这些类默认不加载，需显式引入：
- 确保在构建时启用了
print工具类：@include media-breakpoint-up(print) { ... }不会自动生效，必须手动添加@import "bootstrap/scss/utilities/_print"; - 若用CDN，
bootstrap.min.css不含任何print工具类，必须额外加载bootstrap.min.css并补全.d-print-*类定义 - 检查浏览器开发者工具的“Rendering”面板，切换到
Print模拟模式，确认你的@media print规则是否被Bootstrap同名规则覆盖（常见于.container的max-width）
避免@media print被CSS-in-JS或Shadow DOM破坏
如果项目用了React + Emotion、Vue Scoped CSS，或组件包裹在Shadow Root里，原生@media print可能失效：
- CSS-in-JS库通常不支持全局
@media print注入，需改用Global组件（Emotion）或<style></style>标签动态插入 - Shadow DOM内样式默认隔离，必须把print规则放在
<style></style>标签中并append到document.head，而非组件内部 - Chrome打印预览有时会忽略
@media print中的font-size: clamp()或calc()，降级为固定值更稳妥，例如用font-size: 12px代替font-size: clamp(12px, 0.75rem, 14px)
真正麻烦的不是写几条@media print，而是得逐个验证每个Bootstrap组件在真实打印机上的输出——比如.accordion展开状态、.toast是否残留、data-bs-toggle控制的折叠菜单是否意外显示。建议用window.print()触发前先console.log当前DOM快照，比对着打印预览调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
