bootstrap 4打印样式“丢失”根本原因是浏览器在@media print下主动剥离背景、边框、flex/float布局等视觉样式，需手动添加!important打印规则并启用“背景图形”选项。
Bootstrap 4项目打印时样式“丢失”，不是CSS没加载，而是浏览器在@media print下主动剥离了绝大多数屏幕样式——背景、边框、flex布局、间距、颜色全被重置为白纸黑字的裸结构。
为什么.table-bordered打印出来没边框
浏览器默认禁用border和background-color在打印中的渲染，哪怕你在屏幕样式里写了border: 1px solid #333，打印预览里它也等于没写。Bootstrap 4的.table-bordered类本身不包含@media print变体，所以规则压根不进打印流。
- 必须手动在
@media print块中重写.table th, .table td { border: 1px solid #000 !important; } -
!important不可省——浏览器内置打印样式表的优先级极高，普通声明会被直接覆盖 - 别依赖
border-collapse: collapse自动生效，得显式加!important，否则部分浏览器（如 Safari）仍会渲染出双线
为什么.row和.col在打印里塌成一列
Bootstrap 4的栅格基于float（.row是float: left，.col是float: left + width），而打印引擎完全忽略float语义——它只认文档流内的块级框，浮动元素直接被当成“不存在”处理。
- 在
@media print中强制重置：.row, .col, .col-*, .col-sm-*, .col-md-* { float: none !important; display: block !important; width: 100% !important; } - 如果用了嵌套栅格（比如
.col-md-8 > .row），父容器width没设100%，子.row会按auto计算，导致内容溢出A4纸宽 - 避免用
display: flex替代浮动来修复——Bootstrap 4本身不带flex栅格，强行加反而引入兼容性风险
为什么page-break-inside: avoid对表格行无效
根本原因是tr被包裹在.table里，而.table默认是display: table，但它的父容器（比如.card或.container）可能有overflow: hidden或position: relative，这两者会阻断分页指令传播。
- 给
.table tr加page-break-inside: avoid !important前，先确保.table父级没有overflow: hidden；如有，需在@media print中覆盖为overflow: visible !important -
.table自身要加table-layout: auto !important，禁用table-layout: fixed（后者在打印中列宽计算失准，易导致换行错乱） - 不要只靠
page-break-inside：对关键节（如发票抬头、报告标题）用page-break-before: page !important显式切页，更可控
最常被忽略的一点：Chrome 和 Edge 默认关闭“打印背景图形”，即使你写了background-color并加了!important，也得手动在打印设置里勾选“背景图形”才能看见——这不是CSS问题，是用户端开关没开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
