Bootstrap 4 CSS导致Chrome打印「布局」选项消失问题咨询

你猜得没错！这个问题确实和Bootstrap 4的默认打印CSS指令有关，我之前维护项目升级时也踩过这个坑。

问题根源 #

Bootstrap 4为了统一打印页面的默认体验，在@media print媒体查询里默认加了@page { size: a4; }这类规则。这个设置会强制Chrome使用固定的纸张尺寸和方向，直接导致浏览器打印设置里的「布局」选项被锁定隐藏——毕竟浏览器会认为你已经指定了固定的页面规格，没必要再让用户切换了。

快速修复方案 #

只需要在你的自定义CSS里覆盖这个默认规则就行，代码如下：

@media print {
  @page {
    size: auto !important; /* 取消Bootstrap强制的纸张尺寸/方向限制 */
  }
  
  /* 可选补充：如果打印内容出现过度拉伸/挤压，可添加以下样式 */
  body {
    width: auto !important;
    max-width: none !important;
  }
}

验证步骤 #

1. 打开Chrome开发者工具，进入「Rendering」面板（路径：更多工具 > Rendering）
2. 勾选「Emulate CSS media type」并选择「print」，检查页面样式是否成功覆盖了Bootstrap的默认规则
3. 清空浏览器缓存后，重新打开打印预览，确认「布局」选项是否恢复显示

额外提示 #

如果还是没恢复，排查下项目里有没有其他自定义打印样式，比如强制给body或容器设置了固定宽度，这类设置也可能干扰浏览器的打印布局选项。

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