需用@media print重置Bootstrap打印样式：隐藏非内容元素，将栅格设为block布局，表格强制换行并取消响应式容器，文本强制纯黑、背景透明，且须显式重写CSS变量。
打印时 Bootstrap 样式混乱，怎么修复？
Bootstrap 默认样式不是为打印设计的，display: flex、float、position: fixed 这些在屏幕上好用的规则，打出来经常错位、截断或空白。核心问题是：浏览器打印预览默认用屏幕媒体（screen）样式，而没启用专为打印优化的规则。
- 必须用
@media print块覆盖关键样式，不能只依赖 Bootstrap 自带的极简print.css（它只清除了部分颜色和背景） - 优先重置布局类：把
.container、.row、.col-等设为display: block和width: auto - 隐藏非内容元素：
.navbar、.sidebar、.btn、图标字体（font-family: "bootstrap-icons"）在打印时基本无意义，直接display: none
@media print {
.navbar, .sidebar, .btn, .d-none, .d-print-none { display: none !important; }
.container, .container-fluid { width: 100% !important; max-width: none; }
.row { display: block; margin: 0; }
.col, [class^="col-"] { display: block; float: none; width: 100%; }
}
如何让 Bootstrap 表格在打印时不被截断？
表格是打印中最容易出问题的组件——.table-responsive 的 overflow-x: auto 在打印时完全失效，横向滚动内容直接被裁掉；white-space: nowrap 会让单元格撑破页面宽度。
- 移除响应式容器：
.table-responsive在打印时必须取消包裹，否则内容被硬截断 - 强制换行：
td, th { word-break: break-word; white-space: normal; } - 控制列宽：
table { table-layout: auto; }（避免fixed导致列宽失真） - 小字号表格可加
font-size: 0.8rem，但别小于0.7rem，否则打印机可能识别不清
如果表格含合并单元格（rowspan/colspan），务必测试真实打印机输出——某些驱动对复杂 HTML 表格渲染不一致，比浏览器预览更严格。
打印按钮点击后只打印部分内容，怎么限定范围？
直接调用 window.print() 会打印整个页面，但用户往往只想打当前卡片或表单。Bootstrap 本身不提供打印范围 API，得靠手动控制。
立即学习“前端免费学习笔记（深入）”；
- 给目标区域加唯一 class，比如
class="print-section" - 打印前临时隐藏其他内容：
function printSection() { const all = document.body.children; for (let el of all) { if (!el.classList.contains('print-section')) { el.style.display = 'none'; } } window.print(); // 恢复显示（注意：需等打印对话框关闭后执行，否则部分浏览器会跳过恢复） setTimeout(() => { for (let el of all) el.style.display = ''; }, 100); } - 更稳妥的做法是用
@media print配合:not(.print-section)选择器，避免 JS 操作 DOM 状态冲突
Bootstrap 5 的 color 工具类在打印时颜色太浅？
text-muted、text-secondary 这类灰阶文字，在黑白打印机上几乎不可读；bg-* 背景色则可能变成大片灰块，吃墨又遮挡文字。
- 打印时强制文本为纯黑：
[class*="text-"] { color: #000 !important; } - 清除所有背景：
[class*="bg-"] { background-color: transparent !important; } - 特别注意
.alert和.badge：它们依赖背景色传达语义，打印时需用边框+文字替代，例如：.alert { border: 1px solid #000; padding: 8px; } .alert-info::before { content: "ℹ️ "; }
Bootstrap 的栅格、间距（mt-3、px-4）在打印时大多能保留，但 gap 属性兼容性差（旧版 Edge/IE 完全不支持），建议打印专用区域改用 margin 控制间距。
真正麻烦的是自定义主题色和 CSS 变量——--bs-primary 这类变量在 @media print 中不会自动降级为黑白色，必须显式重写。这点很容易漏，结果打印出来全是浅蓝浅紫，最后一页才发现。
