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

时间:2018-04-11 22:01:01

标签: html css twitter-bootstrap bootstrap-4

我在使用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;打印,你应该看到相同的结果。

任何想法如何解决?

3 个答案:

答案 0 :(得分:7)

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

修复添加以下代码段:

@page {
    size: auto;
}

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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