Bootstrap打印错位主因是浏览器重置盒模型、禁用flex及负外边距——需强制.row为block、.col取消float和padding，并显式声明所有断点类如col-12，避免响应式失效。
Bootstrap栅格在打印预览时错位，根本不是栅格系统本身的问题，而是浏览器在 @media print 下重置了盒模型、禁用负外边距、忽略 flex 布局行为导致的——.row 的 margin: 0 -15px 失效，.col 的 padding 不再被抵消，整行宽度直接超 100%，必然换行错位。
为什么 .row 和 .col 在打印时会“散架”
浏览器打印样式表（user agent stylesheet）默认会：
- 将所有元素的
display强制设为block或inline，flex布局完全失效 - 重置
margin和padding，.row的负外边距被清零，.col左右15pxpadding 变成真实外扩 - 忽略
box-sizing: border-box的继承上下文，尤其在嵌套容器中容易回退到content-box - 不执行 JavaScript，所以任何靠 JS 动态修正高度/位置的方案在打印时一律无效
必须覆盖的打印样式：修复 .row/.col 布局流
不能只修表格或文字，得先让栅格结构“站住”。以下规则需加在你的 CSS 中，并带 !important：
-
@media print { .row { display: block !important; margin: 0 !important; } }—— 关掉 flex，避免不可控渲染 -
@media print { .col { float: none !important; width: auto !important; padding: 0 !important; } }—— 清除所有栅格语义，回归文档流 -
@media print { .col-12, .col-md-12, .col-lg-12 { width: 100% !important; } }—— 显式控制断点类，防止退化异常 - 若用了
gx-/gy-类，也得单独重写：.gx-3 { padding-left: 0 !important; padding-right: 0 !important; }
响应式类失效？补全所有断点声明
打印时浏览器不运行媒体查询逻辑，.col-md-4 这类类名不会自动切换为 .col-12。常见现象是：小屏本该堆叠的列，在打印里仍强行并排，挤出页面。
- 别只写
.col-md-6，必须显式补上基础断点：class="col-12 col-md-6" - 对多列布局，建议统一用
col-12 col-sm-6 col-md-4，确保从最小屏到打印都有明确宽度 - 如果内容允许，打印时直接用
col-12全部堆叠——多数报表场景下，纵向阅读比横向对齐更重要
调试时别信“所见即所得”
Chrome/Firefox 的打印预览界面本身会做二次缩放和分页裁剪，outline 或临时边框在预览里可能被隐藏或变形。
- 验证是否生效：打印前先「另存为 PDF」，再打开 PDF 查看真实布局
- 避免用
border调试打印样式——它会参与盒模型计算，加剧错位；改用outline: 1px dashed red - 关键检查点：打开打印预览后，右键「检查」，选中一个
.col，看 Computed 面板里width是否接近预期百分比，margin是否为0
真正难处理的不是样式覆盖，而是当栅格里混有卡片、图片、动态高度内容时，打印引擎对 height 和 page-break 的处理极不稳定——这时候与其硬调栅格，不如提前用 @media print 切换为纯语义 HTML 结构。
