我在使用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;打印,你应该看到相同的结果。
任何想法如何解决?
答案 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;
}