bootstrap 5 打印时布局错位是因为浏览器打印引擎不支持 flex/grid，.row 和 .col 失效退化为 block 和 100% 宽度，需在 @media print 中系统重置 display、float、width、margin、padding 等属性，并清理嵌套浮动元素。
Bootstrap 5 的 CSS 布局在打印模式下错位，不是你写错了，而是它根本没被浏览器当“布局系统”对待——display: flex 和 display: grid 在打印引擎里大量失效，浮动被忽略，响应式类（如 .col-md-6）直接退化为普通块级元素。
为什么 .row 和 .col 在打印时完全失灵
Chrome、Edge、Firefox 的打印后端不解析 Flex/Grid 的布局语义：.row 的 display: flex 被降级为 display: block，.col 的 flex: 0 0 auto 失效，所有列垂直堆叠，宽度回归 100%。更麻烦的是，--bs-gutter-x 这类 CSS 变量在 @media print 中不会自动注入，但旧的 margin-left: -15px 可能还在，导致负边距残留、内容左偏。
- 检查 DevTools 的 computed 样式：打印预览中
.row的display值大概率是block，不是flex -
.col-*类在打印中不触发断点逻辑——.col-md-6和.col-sm-12效果一样，全按默认行为渲染 - 不要试图用
!important强行保留flex；打印引擎不支持，只会让样式冲突更难调试
@media print 中必须重置哪些 Bootstrap 类
不能只覆盖个别属性，得系统性剥离 Bootstrap 的布局干预：
- 对所有
.row：显式设display: block !important，清空--bs-gutter-x和--bs-gutter-y - 对所有
[class*="col-"]：重置float: none !important、width: 100% !important、flex: none !important - 禁用栅格相关 margin/padding：
.row, .col { margin: 0 !important; padding: 0 !important; } - 如果用了
.container或.container-fluid，也需重置max-width和padding，否则窄容器会把内容压成一列还留大片空白
浮动 + Bootstrap 混用时打印错位更严重
旧项目若同时存在 float: left 和 .col，打印时两者都失效，但副作用叠加：浮动子项脱离文档流导致 .row 高度塌陷，而 .col 又无法 flex 填充，结果是内容悬浮、页脚上移、表格截断。
- 最简解法：在
@media print中统一加.legacy-grid *, [class*="col-"] { float: none !important; } - 配套清理
clear：clear: none !important，否则残留clear: both会在不该断行的地方插入空白 - 如果必须保留多栏结构，改用
display: table降级：.row { display: table !important; width: 100%; }，.col { display: table-cell !important; }
真正容易被忽略的点
不是没写 @media print，而是写了却没覆盖到嵌套层级——比如 CMS 输出的 HTML 里，.col 套着一个 div class="sidebar float-right"，你重置了 .col，但忘了那个 .sidebar 仍在打印中浮动，它一飘，整个区块就偏移。这种漏网之鱼会让所有断页规则（break-inside: avoid 等）全部失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
