bootstrap打印样式失效是因浏览器打印引擎忽略浮动/grid等布局，需在@media print中重写表格边框、列宽、分页等规则，并用.d-print-none等专用类控制显示。
Bootstrap 的打印样式不是“失效”，而是被浏览器打印引擎和 Bootstrap 自身的 @media print 规则共同压制——你看到的“布局乱掉”，其实是浮动、Grid、表格宽度、分页逻辑全部退化为原始块级流的结果。
为什么 @media print 里 Bootstrap 表格边框/条纹/间距全没了
浏览器在打印模式下默认禁用背景色、边框、自定义 padding 等视觉样式，直接回退到极简的 user agent stylesheet。Bootstrap 的 .table-bordered 或 .table-striped 在屏幕下生效，但打印时不会自动触发对应规则——它没被重写，就等于不存在。
- 必须显式在
@media print中覆盖：强制border-collapse: collapse !important、每个th/td加border: 1px solid #000 !important和padding -
.table-striped > tbody > tr:nth-of-type(odd)这类选择器在打印中不自动继承，得单独补一遍@media print版本 - 避免用
box-shadow、background-image、transparency—— 打印机压根不渲染这些
为什么表格列宽错乱、右侧被截断
根本原因是 table-layout: fixed（Element UI/Ant Design/Bootstrap 默认启用）在打印中完全失效：列宽计算丢失，内容挤成一团或溢出纸张。
- 在
@media print中强制重写：table { table-layout: auto !important; width: 100% !important; } -
<colgroup></colgroup>基本被忽略，改用tbody tr:first-child td { min-width: 80px !important; }控制最小列宽 - 如果表格嵌在浮动容器（如
.sidebar）里，先清父级浮动：.sidebar { float: none !important; }，再调表格样式，顺序不能反
为什么 break-inside: avoid 加了也没用
加在 .table 容器上等于白写。打印分页机制只识别“可分页的块级子项”，对容器无感知。
- 真正起作用的是给每行加：
.table tr { break-inside: avoid !important; } - 注意：某些浏览器要求
tr是块级才能生效，可配合display: block !important（但会破坏表格语义，慎用） - 更稳妥的做法是服务端导出 PDF，尤其当数据量大、跨页逻辑复杂时
为什么 d-none 类在打印时还显示
Bootstrap 的 .d-none 默认只作用于所有媒体类型，但不包含 print —— 它的响应式工具类是按媒体类型分组的。
- v5.3+ 直接用
.d-print-none或.d-none.d-print-block - v5.2 及更早版本需手动补：
@media print { .d-print-none { display: none !important; } } - 别依赖
visibility: hidden—— 它仍占布局空间，可能撑出空白页
最易被忽略的一点：打印样式不是屏幕样式的微调，而是必须重写的独立层。浏览器打印引擎根本不解析 grid-template-areas、float、position: fixed，它们不是“渲染错”，是直接被忽略。你写的每一行 @media print，都得假设前面所有布局已归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
