bootstrap导航栏打印时仍显示是因为d-none对所有媒介生效且默认无打印专用类；解决方法是使用d-print-none（需bootstrap 5.3+且启用print样式）或手写@media print { .navbar, .navbar-collapse, .navbar-toggler { display: none !important; } }并注意兼容性与渲染时机。
Bootstrap导航栏为什么打印时还显示
因为 d-none 类在所有媒介（包括 @media print）下都生效，但很多人误以为它只对屏幕起作用；而 Bootstrap 5 默认不启用任何打印专用类（如 d-print-none），更不会自动隐藏导航栏。你看到的“导航栏还在”，不是 CSS 没加载，而是它根本没被针对性覆盖。
用 d-print-none 最快解决，但得确认启用条件
这个类只在打印时设 display: none !important，对屏幕浏览完全无影响——但它不是开箱即用的：
-
d-print-none必须来自 Bootstrap 5.3+ 的完整构建，且$enable-print-styles: true在 Sass 编译时已开启（默认是false） - 如果你用的是 CDN 或预编译的
bootstrap.min.css，大概率不含d-print-none—— 可以打开 DevTools → Elements 面板搜索d-print-none看是否匹配到规则 - 若确认存在，直接加在导航容器上：
<nav class="navbar d-print-none"></nav> - 别和
d-none同时写：d-none d-print-none没意义，d-none已全局隐藏
手写 @media print 规则才是 100% 可控方案
不依赖版本、不赌构建配置，直接在自己 CSS 文件末尾加：
@media print {
.navbar,
.navbar-collapse,
.navbar-toggler {
display: none !important;
}
}
关键点：
- 选择器要够具体：用
.navbar比nav更安全，避免被框架内联样式或第三方库覆盖 - 必须加
!important：浏览器打印样式表（user agent stylesheet）优先级极高，普通声明会被无视 - 连带隐藏
.navbar-collapse和.navbar-toggler：它们可能独立渲染，漏掉一个就会在 PDF 里冒出空白块或按钮图标 - 如果导航用了
position: fixed（比如fixed-top），补一句visibility: hidden !important防 Safari iOS 打印引擎残留
真机验证比 Chrome 预览更可信
Chrome 的 “Emulate CSS media type: print” 能帮定位样式问题，但输出行为仍可能和真实设备不一致：
- iOS Safari 对
@media print是懒加载，样式表已载入，规则却可能未执行——必须用系统分享菜单 → “打印” 实测 - 安卓 WebView（尤其旧版）会忽略
display: none，改用visibility: hidden !important+pointer-events: none !important双保险 - 动态生成的导航（如 React/Vue 渲染的汉堡菜单）要在
window.print()前手动加no-print类，不能等 CSS 自动匹配
真正容易被忽略的不是“怎么写”，而是“谁在控制渲染时机”：CSS 规则是静态的，但导航 DOM 可能晚于打印触发才挂载。
