Bootstrap 5默认不提供可用打印样式，@media print失效主因是优先级被其高特异性类覆盖、CDN版不含打印工具类、CSS-in-JS或Shadow DOM隔离，须用!important、独立print.css、@media print包裹.d-print-*类并启用$enable-print-styles。
Bootstrap 5 默认不带可用的打印样式，直接 window.print() 会把导航栏、侧边栏、彩色背景、阴影全打出来——这不是你漏写了，是它本来就没提供。
为什么 @media print 写了却没生效
常见现象：加了 @media print { .navbar { display: none; } }，但打印预览里导航栏还在。根本原因不是语法错，而是优先级被 Bootstrap 的通用规则压过了。
- Bootstrap 的
.navbar类本身有高特异性（比如.navbar.navbar-expand-lg），你单写.navbar不够重 - CDN 加载的
bootstrap.min.css在你的样式之前，它的规则先解析、后覆盖 - 用了 CSS-in-JS（如 Emotion）或 Shadow DOM 时，
@media print可能根本进不了全局作用域 - 检查 Chrome DevTools → Rendering → Emulate CSS media:
print，确认你的规则是否被划掉（strikethrough）
必须加 !important 吗？哪些地方不能省
在打印场景下，!important 不是偷懒，而是必要手段——因为浏览器默认会启用「忽略背景图」和「强制黑字白底」策略，而 Bootstrap 的 .bg-primary、.text-white 等类又自带 !important，你不加就赢不了。
- 隐藏非内容区域：
.navbar, .sidebar, .btn, .alert, .badge { display: none !important; } - 重置文字与背景：
body, p, li, td { color: #000 !important; background: transparent !important; }（避免深色背景吃墨） - 移除干扰效果：
* { box-shadow: none !important; border-radius: 0 !important; }（通配符在这里可接受） - 但别对字体、内边距等泛用
!important——优先靠选择器权重，比如用.table th而不是th
表格打印断裂、表头消失、边框丢失
浏览器对 <table> 的分页控制极弱，<code>page-break-inside: avoid 对 <tr> 基本无效，且默认不重复 <code><thead>，也不继承屏幕样式里的 <code>border 和 padding。
立即学习“前端免费学习笔记（深入）”；
- 给整个表格加
class="print-table"，然后写：.print-table { width: 100% !important; page-break-inside: avoid !important; } - 强制表头可见：
@media print { thead { display: table-header-group; } }（关键！多数人漏掉这句） - 补全边框与间距：
table { border-collapse: collapse !important; } th, td { border: 1px solid #333 !important; padding: 4px 6px !important; } - 如果数据量大（>50 行），别硬扛浏览器分页——服务端导出 PDF 更可靠
用 .d-print-none 还是手写 @media print？
.d-print-none 是 Bootstrap 5.3+ 内置的工具类，但它本身只是个空壳：.d-print-none { display: none; }，没包在 @media print 里——所以你必须自己补媒体查询，否则它在屏幕上也隐藏了。
- 正确用法（必须配对）：
@media print { .d-print-none { display: none !important; } .d-print-block { display: block !important; } } - CDN 用户注意：
bootstrap.min.css不含任何打印工具类定义，.d-print-none不会自动生效 - 若用 Sass 构建，需确保启用了
$enable-print-styles: true并显式@import "bootstrap/scss/utilities/_print"; - 简单项目建议跳过工具类，直接写几行
@media print更可控
真正难的不是写多少规则，而是判断哪些元素该留、哪些该砍——比如 a[href] 打印时要不要补 URL，img 是否强制缩放，这些细节在不同业务里差异极大，没法套模板。动手前先用 Chrome 的 Print 模拟模式多点几次预览，比看文档管用十倍。
