如何让使用Bootstrap栅格系统开发的模板实现正常打印？

安全阿岳

2026-10-1

问题核心原因

你当前用的col-sm-*类属于响应式断点类，仅在视口宽度≥576px时生效，打印/PDF生成时的默认视口宽度往往低于这个阈值，会导致栅格列自动堆叠，是布局错乱的主要原因，另外代码中也存在部分语法错误和类使用不当的问题。

修复方案

1. 修正Bootstrap栅格配置

将所有带sm断点的栅格类替换为无断点的基础类，确保不管视口大小都保持设定的宽度比例：

所有col-sm-*改为col-*，例如col-sm-2改为col-2、col-sm-3改为col-3
确认偏移类offset-7无需加断点前缀，保持现有写法即可
align-items-center是flex容器属性，不能直接加在列元素上，如果需要列内容垂直居中，给对应列的父级row元素添加d-flex align-items-center类
修正语法错误：把所有</br>改为标准的<br>，避免渲染异常

2. 添加打印专用样式

在CSS中加入打印媒体查询，强制固定打印尺寸和栅格行为：

@media print {
  /* 设定打印纸张尺寸，可根据需求改为Letter等其他规格 */
  @page {
    size: A4;
    margin: 1cm;
  }
  /* 固定页面宽度匹配A4纸尺寸，避免响应式缩放 */
  body {
    width: 210mm !important;
    min-width: 210mm !important;
  }
  /* 禁用栅格自动换行 */
  .row {
    flex-wrap: nowrap !important;
  }
  /* 自定义类强制生效 */
  .mt-16 {
    margin-top: 4rem !important;
  }
  .container-fluid {
    padding: 0 !important;
    width: 100% !important;
  }
}