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

标签 html css twitter-bootstrap bootstrap-4

我在从 Chrome 打印使用 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 中打开它并右键单击 -> 打印,您应该会看到相同的结果。

有什么解决办法吗?

最佳答案

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

修复添加以下代码段:

@page {
    size: auto;
}

关于html - 在 Chrome 中打印 bootstrap 4 HTML 页面会切断 chrome 页眉/页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49785039/

相关文章:

html - 如何将线分隔符对 Angular 线分成两种颜色?

javascript - 使用 jQuery 切换复选框背景颜色

html - 为什么我的 div 不在词缀菜单中滚动?

twitter-bootstrap - 媒体 div 内的 Bootstrap 3 标签 + 按钮组

html - 与子内联 block 元素一起使用时 float 不起作用

jquery - 更改导航药丸 Bootstrap 的颜色

html - 安装 tide 时出错(Titanium Desktop)

html - 修复了右侧边栏在响应式站点上折叠的问题

html - 单选按钮中的 Tab 键顺序不起作用

html - 在 div 中居中元素,Bootstrap