Bootstrap CSS下A4横向打印排版异常问题求助

这个问题我之前帮同事排查过，核心是Bootstrap响应式网格和打印媒体的尺寸计算逻辑冲突，具体原因和解决办法拆解如下：

为什么会出现大边距？ #

• Bootstrap的col-xs-*这类响应式类是基于屏幕视口设计的，像col-xs-12的width: 100%是继承自父容器的屏幕宽度。但打印时你自定义了@page的宽度（276mm），浏览器的打印渲染引擎会把这个页面宽度和Bootstrap默认的容器宽度（比如桌面端的1170px）混淆，导致内容被强制压缩到“纵向页面的100%宽度”里，两边自然就留出了大空白。
• 另外，Bootstrap的.row和.col-*默认带有margin-left/-right和padding-left/-right，这些间距在横向打印页面时没有被正确重置，进一步挤压了内容的可用宽度。
• 你提到移除col-xs-12的100%宽度能部分修复，正是因为取消了强制宽度限制，内容可以自适应打印页面的实际宽度，这也印证了问题出在网格的宽度约束上。

具体解决办法 #

1. 给打印媒体专门重置Bootstrap网格样式 #

在你的打印CSS里添加以下代码，强制消除网格系统的默认间距和宽度限制：

@media print {
  /* 重置容器的宽度和内边距 */
  .container, .container-fluid {
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 重置行的外边距 */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* 重置所有列的样式，让内容自适应打印页面 */
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
    float: none !important;
  }
}

这样做能让表格内容完全脱离Bootstrap的屏幕网格约束，直接适配打印页面的尺寸。

2. 简化@page的尺寸设置 #

不要硬写固定的width和height，改用标准纸张尺寸+方向，浏览器的打印引擎能更好地处理尺寸匹配：

@page {
  size: landscape A4; /* 直接指定A4横向 */
  margin-top: 1.2cm;
  margin-bottom: 1.2cm;
  margin-left: 1cm;
  margin-right: 1cm;
}

如果表格确实需要更大宽度，可以尝试size: landscape A3;，但要确保打印机支持对应的纸张。

3. 保留部分布局的折中方案 #

如果不想完全放弃网格布局（比如需要两栏打印），可以自定义打印专用的类，避免依赖Bootstrap的响应式col类：

@media print {
  .print-col-6 {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0 5px; /* 可选：保留少量内边距 */
  }
}

然后在HTML里这样写：

<div class="col-xs-6 print-col-6">你的内容</div>

这样屏幕上用Bootstrap的col布局，打印时用自定义的适配样式。

4. 高效调试技巧 #

在Chrome开发者工具里，切换到打印媒体模式（路径：More Tools > Rendering > Emulate CSS media type > 选择print），可以实时预览打印样式，调整CSS时能立刻看到效果，比反复打印测试高效得多。

内容的提问来源于stack exchange，提问作者AJ-