应使用@media print配合.no-print类隐藏非目标区域，而非依赖bootstrap打印工具类；需加!important、避免全局隐藏、补充分页和背景色控制等样式。

打印时只输出指定区域，其他内容自动隐藏

Bootstrap 本身不提供打印 API，但能和原生 CSS 媒体查询无缝协作。关键不是“用 Bootstrap 实现打印”，而是**在 Bootstrap 页面中精准控制哪些元素参与打印**——靠的是 @media print + 合理的类名隔离，而非依赖 bootstrap.css 自带的打印样式（它只重置了部分基础样式，不负责区域裁剪）。

@media print 中用 display: none 隐藏非目标区域

最直接、兼容性最好的方式：给不需要打印的容器统一加一个类（比如 no-print），然后在样式表里写：

@media print {
  .no-print {
    display: none !important;
  }
}

注意几点：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 必须加 !important，否则 Bootstrap 的响应式类（如 d-none d-md-block）可能干扰打印时的显示逻辑
• 不要对 body 或全局容器设 display: none，否则整个页面空白——只隐藏“非目标”部分
• 如果目标区域是 <div id="print-area">，建议同时给它加 <code>print-only 类，并在 @media print 中确保其他所有兄弟节点被 .no-print 覆盖

  避免 Bootstrap 工具类在打印时意外生效

  Bootstrap 的显示工具类（如 d-none、d-print-none）在 v5.3+ 才支持 print 变体，老版本或未启用完整 Sass 编译时这些类根本不存在。所以：

  • 别依赖 d-print-none —— 它在 CDN 引入的 CSS 中默认不生成，除非你自定义了 $enable-print-styles: true 并重新编译
  • d-none 在打印时仍生效（因为它没媒体查询封装），会误杀本该打印的内容
  • 推荐做法：完全绕开 Bootstrap 显示工具类做打印控制，用独立的 .no-print / .print-only 类，语义清晰且可控

  触发打印前临时修正布局与样式

  打印预览常暴露隐藏问题：分页截断、字体缩放异常、背景色丢失（Chrome 默认禁用）、边框塌陷。需要针对性补丁：

  • 强制打印背景：@media print { * { -webkit-print-color-adjust: exact; color-adjust: exact; } }
  • 防止跨页断裂：#print-area { page-break-inside: avoid; }（对块级容器有效）
  • 移除导航/页脚干扰：.navbar, .footer { display: none !important; }，但别写在全局，应限定在 @media print 内
  • 打印前用 JS 切换 body 类（如 document.body.classList.add('printing')），再通过 @media print .printing .no-print 提升选择器权重，更稳妥

  局部打印不是加个类就完事，真正麻烦的是分页逻辑和第三方组件（比如表格、图表库）的样式穿透——它们往往自带内联样式或 Shadow DOM，display: none 可能失效，得逐个 inspect 元素的 computed 样式。