应使用@media print配合.no-print类隐藏非目标区域，而非依赖Bootstrap打印工具类；需加!important、避免全局隐藏、补充分页和背景色控制等样式。
打印时只输出指定区域，其他内容自动隐藏
Bootstrap 本身不提供打印 API，但能和原生 CSS 媒体查询无缝协作。关键不是“用 Bootstrap 实现打印”，而是**在 Bootstrap 页面中精准控制哪些元素参与打印**——靠的是 @media print + 合理的类名隔离，而非依赖 bootstrap.css 自带的打印样式（它只重置了部分基础样式，不负责区域裁剪）。
@media print 中用 display: none 隐藏非目标区域
最直接、兼容性最好的方式：给不需要打印的容器统一加一个类（比如 no-print），然后在样式表里写：
@media print {
.no-print {
display: none !important;
}
}注意几点：
- 必须加
!important，否则 Bootstrap 的响应式类（如d-none d-md-block）可能干扰打印时的显示逻辑 - 不要对
body或全局容器设display: none，否则整个页面空白——只隐藏“非目标”部分 - 如果目标区域是
<div id="print-area">，建议同时给它加print-only类，并在@media print中确保其他所有兄弟节点被.no-print覆盖
避免 Bootstrap 工具类在打印时意外生效
Bootstrap 的显示工具类（如 d-none、d-print-none）在 v5.3+ 才支持 print 变体，老版本或未启用完整 Sass 编译时这些类根本不存在。所以：
立即学习“前端免费学习笔记（深入）”；
- 别依赖
d-print-none—— 它在 CDN 引入的 CSS 中默认不生成，除非你自定义了$enable-print-styles: true并重新编译 -
d-none在打印时仍生效（因为它没媒体查询封装），会误杀本该打印的内容 - 推荐做法：完全绕开 Bootstrap 显示工具类做打印控制，用独立的
.no-print/.print-only类，语义清晰且可控
触发打印前临时修正布局与样式
打印预览常暴露隐藏问题：分页截断、字体缩放异常、背景色丢失（Chrome 默认禁用）、边框塌陷。需要针对性补丁：
- 强制打印背景：
@media print { * { -webkit-print-color-adjust: exact; color-adjust: exact; } } - 防止跨页断裂：
#print-area { page-break-inside: avoid; }（对块级容器有效） - 移除导航/页脚干扰：
.navbar, .footer { display: none !important; }，但别写在全局，应限定在@media print内 - 打印前用 JS 切换 body 类（如
document.body.classList.add('printing')），再通过@media print .printing .no-print提升选择器权重，更稳妥
局部打印不是加个类就完事，真正麻烦的是分页逻辑和第三方组件（比如表格、图表库）的样式穿透——它们往往自带内联样式或 Shadow DOM，display: none 可能失效，得逐个 inspect 元素的 computed 样式。
