Question

我在使用Bootstrap 4（只有4,3.3.7工作正常）打印HTML页面时遇到问题，其中页眉和页脚部分被遮盖。 Here是我所指的屏幕截图，您会看到日期，标题，文件/网址被部分截断。这似乎是bootstrap的一个问题。我创建了一个小测试页面，只有一个指向bootstrap 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打开它并右键单击 - ＆gt;打印，你应该看到相同的结果。

任何想法如何解决？

Answer 1

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

修复添加以下代码段：

@page {
    size: auto;
}

Answer 2

在导入引导scss文件之前，不要包括其他@page { size: auto; }规则，而应覆盖$print-page-size: auto;变量：

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

Answer 3

当前，引导程序_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;
}

尽管代码注释中说“ margin ...在Chrome中破坏了“ size”，但事实并非如此。设置边距而不是直接更改size属性，可以保留引导程序其他有用的页面格式。 margin-top规则将内容压入页面标题（日期和标题）下方，而margin-bottom则清除页面页脚（URL和页面编号）。

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

Chrome中的打印引导程序4 HTML页面会切断镀铬页眉/页脚

3 个答案: