打印时bootstrap栅格消失是浏览器默认行为，因@media print禁用display:flex等样式，需显式添加!important规则恢复.row的display:flex及.col-*的flex-basis或width。
打印时 Bootstrap 栅格完全消失，不是 bug 是浏览器默认行为
浏览器在 @media print 下会主动禁用大部分 CSS 视觉样式，包括 display: flex、margin、padding 和背景色。Bootstrap 的 .row 和 .col-* 依赖 Flexbox 布局，一旦 display 被重置为 block 或 inline，栅格就彻底“退化”成普通块级元素堆叠——这不是你代码写错了，是浏览器在帮你“简化打印内容”。
为什么加了 container row col 类，打印预览里还是竖着排
因为打印媒体查询中，Bootstrap 自带的 CSS 会把 .row 的 display 强制设为 block（或根本没定义），而 .col-* 的 flex 相关属性全被忽略。DevTools 的 Styles 面板里能看到：原本生效的 flex: 0 0 50% 变成灰色（被覆盖），computed 中 display 是 block，width 是 auto。
- 打开打印预览（Ctrl+P），右键检查任意
.col-6元素，看右侧 Styles 是否还有来自 bootstrap.css 的 flex 声明 - 若没有，说明
@media print已经切断了栅格逻辑链 - 别试图用 JS 动态改 class —— 打印样式表优先级极高，JS 无法覆盖
!important规则
怎样让栅格在打印时“看起来像屏幕一样”
必须手动补全打印专用样式，且每条规则都得加 !important。核心是两件事：恢复 Flex 布局 + 保证子元素宽度计算正确。
-
.row必须显式设为display: flex !important，否则所有.col-*都当普通 div 处理 -
.col-*需要强制 width 或 flex-basis：.col-6 { flex: 0 0 50% !important; max-width: 50% !important; } - 如果用了响应式类（如
col-md-6），得为每个断点单独写打印规则，例如：@media print and (min-width: 768px) { .col-md-6 { ... } } - 嵌套的
.row同样要加display: flex !important，否则内层栅格直接失效
容易被忽略的兼容细节
即使写了 @media print 样式，也可能因父容器限制或单位错位导致错行、溢出或空白过大。
-
mx-n2这类负边距工具类在打印时无效 —— 它依赖 rem 单位和正常流布局，打印引擎不认这套；应改用margin: 0 -15px !important - 如果外层
.container设了max-width，打印时可能被浏览器缩放裁剪，建议打印样式中临时设为width: 100% !important; max-width: none !important; - Chrome 打印预览的“页面设置”里勾选“背景图形”，否则
background-color仍不会显示（哪怕 CSS 里写了!important）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
