bootstrap的d-flex等类在打印时失效，因它们仅在@media screen下生效；打印预览中需用d-print-flex或手动补@media print规则，并注意避免flex-grow:1撑页、禁用align-items等。
为什么打印时 display: flex 完全失效
不是代码写错了，是浏览器压根不把 display: flex 当作 print 媒体的默认行为。Bootstrap 的 d-flex、flex-row 这些类只在 @media screen 下生效，打印预览（@media print）里它们等于不存在。Chrome 和 Edge 甚至会主动降级 flex-wrap、忽略 justify-content，Firefox 也只是略宽松一点。
必须在 @media print 中重写 flex 相关样式
不能指望屏幕样式自动继承，得手动补全逻辑链。重点不是“加 display: flex”，而是补全整个弹性上下文：
- 用
flex-flow: column nowrap替代单独的flex-direction: column—— 它是简写，解析优先级更高，更不容易被跳过 - 删掉
flex-grow: 1：打印没有视口约束，它会让元素无节制拉伸，撑出空白页或截断内容 - 给卡片类容器加
page-break-inside: avoid，否则 Flex 子项可能在页中硬生生劈开 - 避免
align-items: center或stretch：居中易导致内容被页边截断；等高拉伸会直接撑爆页面
Bootstrap 5.3+ 推荐用 d-print-* 类替代手写媒体查询
如果你用的是 Bootstrap 5.3+，别再自己写 @media print { .card { display: block; } }。直接用内置打印工具类更稳：
-
d-print-none：只在打印时隐藏（如导航栏） -
d-none d-print-block：屏幕隐藏、打印显示（如报告标题） - 这些类本身不带
@media print包裹，但依赖你项目中已引入的 Bootstrap 打印样式支持（比如通过 Sass 构建时启用了$enable-print-styles，或 CDN 后额外加载了print.css） - 老版本（5.2 及更早）必须手动补
@media print { .d-print-none { display: none !important; } }
调试时别靠 Ctrl+P 预览，用 DevTools 模拟
打开 Chrome DevTools → ⋮ → More tools → Rendering → 勾选 Emulate CSS media: print。页面立刻按打印样式渲染，改完 CSS 刷新即见效果。这个模拟不触发真实分页，但能准确定位布局崩塌、颜色丢失、元素未隐藏等问题。
真正容易被忽略的是：Flex 容器在打印时是否仍保持 display: flex，得去「Computed」面板里确认 —— 如果 computed 的 display 是 block，说明你漏写了 d-print-flex 或没补 @media print 规则。
