在 Chrome 中打印 bootstrap 4 HTML 页面会切断 chrome 页眉/页脚答案

【问题标题】：Printing bootstrap 4 HTML page in Chrome cuts off chrome header/footers在 Chrome 中打印 bootstrap 4 HTML 页面会切断 chrome 页眉/页脚
【发布时间】：2018-09-21 22:15:07
【问题描述】：

我在从 Chrome 打印带有 Bootstrap 4 样式的 HTML 页面时遇到问题（只有 4、3.3.7 可以正常工作），其中页眉和页脚被部分覆盖。 Here 是我所指的屏幕截图，您会看到日期、标题、文件/网址被部分截断。这似乎是引导程序的问题。我创建了一个小测试页面，只有一个引导 cdn 的链接，但它仍然会发生。

这是作为测试的 HTML：

<html>
    <head>
        <link rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
            crossorigin="anonymous">
    </head>
    <body>
    </body>
</html>

如果您将其放入 html 页面，然后在 chrome 中打开并右键单击 -> 打印，您应该会看到相同的结果。

任何想法如何解决？

【问题讨论】：

我有类似的问题，但我没有使用引导程序。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

问题似乎是在 4.1.1 版（撰写本文时的最新版本）中的完整引导 css 文件（而不是 grid or reboot）中将 size property 设置为 a3 )

修复添加以下sn-p：

@page {
    size: auto;
}

【讨论】：

这就是为我解决问题的方法。非常感谢！

【解决方案2】：

在导入引导 scss 文件之前，不要包含额外的 @page { size: auto; } 规则覆盖 $print-page-size: auto; 变量：

https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

【讨论】：

【解决方案3】：

目前，bootstrap 的_print.scss 中的这条规则似乎是罪魁祸首：

// Specify a size and min-width to make printing closer across browsers.
// We don't set margin here because it breaks `size` in Chrome. We also
// don't use `!important` on `size` as it breaks in Chrome.
@page {
  size: $print-page-size;
}

虽然代码 cmets 说“margin...breaks `size` in Chrome”，但我发现情况并非如此。设置边距，而不是直接更改 size 属性，保留了 bootstrap 的其他有用的页面格式。 margin-top 规则将内容推送到页眉下方（日期和标题），margin-bottom 规则清除页脚（url 和页码）。

@page {
  margin-top: 48px;
  margin-bottom: 48px;
}

【讨论】：