Bootstrap 通过内置打印类（如。d-print-none、.d-print-block）控制打印效果，仅带 print 后缀的类生效；自定义 @media print 需注意浏览器限制、CSS 权重及加载时机。
如何用 @media print 控制 Bootstrap 页面打印效果
bootstrap 本身不提供专门的打印 css 文件，但它的响应式工具类（如 .d-none、.d-print-block）和全局样式都基于标准媒体查询实现，其中就包含对 print 的支持。你不需要额外引入 js 或 hack，只要正确使用 bootstrap 内置的打印相关类，就能控制哪些内容在打印时显示 / 隐藏。
Bootstrap 打印类怎么写？哪些能用、哪些不能用
Bootstrap 4/5 提供了专为打印设计的显示工具类，它们只在 @media print 下生效，不影响屏幕显示：
-
.d-print-none：仅在打印时隐藏元素（等价于@media print {display: none !important;}） -
.d-print-block/.d-print-inline/.d-print-inline-block：仅在打印时强制设为对应 display 值 -
.d-none和.d-md-none等断点类 —— 不作用于打印 ，它们只响应屏幕宽度，跟print无关
常见错误是误以为 .d-lg-none 能隐藏打印内容，结果打印出来全在。记住：只有带 print 后缀的类才管打印。
为什么写了 @media print 却没生效？三个高频原因
即使你手写 @media print {……}，也常被忽略底层限制：
- 浏览器默认禁用部分 CSS 属性：比如
background-color、box-shadow、border-image在大多数浏览器打印预览中默认被忽略（除非用户勾选“背景图形”） - Bootstrap 的打印类依赖
!important，如果你自定义的@media print规则权重不够，会被覆盖；建议加!important或检查 CSS 加载顺序 - Chrome/Firefox 对
@media print的解析时机较晚，若 CSS 是动态插入或异步加载，可能错过打印样式注册；确保<link>或<style>在<head>中静态存在
实际场景：打印报表页时隐藏导航栏 + 显示页眉页脚
典型需求：网页有顶部导航、侧边栏、主内容区，打印时只想输出主内容 + 自定义页眉（含公司名 + 日期）和页脚（含页码）。
推荐做法：
- 给导航栏加
class="d-none d-print-block"→ 屏幕隐藏，打印时块级显示（用于页眉） - 给侧边栏加
class="d-none"→ 屏幕隐藏（它本来就不该出现在打印里） - 主内容区加
class="d-print-block"（冗余但保险） - 在 HTML 底部加一个
<div class="d-none d-print-block">……</div>作为页脚容器，并用@media print配合:before/:after插入页码（注意：CSS 页码需用counter()，且仅在 Firefox/Edge 支持较好，Chrome 仍受限）
真正难的不是写类，而是接受「浏览器打印能力有限」——比如无法可靠控制分页位置、无法跨页重复表头、无法精确缩放字体。这些得靠 PDF 导出兜底，而不是硬扛 @media print。
