从Google Chrome打印引导页面会导致(有时)打印页面的截断高度

Question

从这个官方模板开始: http://getbootstrap.com/examples/jumbotron/ bootsrap v.3.3.7并使用Google Chrome v.54.0.2840.99 m(64位),在最大化窗口1920px监视器上,当我尝试要以A4横向格式打印页面,打印预览(以及保存的PDF或打印页面)将被高度截断.
在这种特定情况下应该是2页高度而不是1.
这发生在:

• 从Chrome打印(在Firefox v50.0.1和IE11中,问题不存在)
• 当我在屏幕模式下打印时cols没有折叠(在上面的boostrap示例中,当窗口的宽度大于或等于992px并按下打印时.如果窗口小于992px并按下打印,则打印预览未截断)
• 单个纸张高度比自举页面缩短(在上面的自举示例中,A4垂直不会重现问题,因为内容不足)

我注意到,如果我float:left;从所有.col-**-*打印预览中删除不截断,但很明显单列模板并不总是适合打印.

您也可以在原始bootstrap示例中复制该错误.
如何在打印模式下获取引导网格,并且打印页面不会被Chrome截断？

Answer 1

我也看到过这个问题.我很高兴这不仅仅是我.如果更改屏幕视口,打印输出更改的事实特别奇怪.

无论如何,我尝试了@ artem的解决方案,但没有成功.

我最终做到了:

@media print {
    [class*="col-md"], [class*="col-sm"], [class*="col-xs"] {
        float: none;
    }
}

这可能不适用于所有情况,因为它删除所有浮动.但是,在我相对简单的布局上进行打印就足够了.

Answer 2

我的项目中遇到了同样的问题.经过几个小时的调试后,我发现如果将宽度设置为100%就.container可以了.我的解决方案是:

@media print {
    .container {
        width:100%;
    }
}

Answer 3

我在 Chrome 54+ 中看到了这个问题，它似乎是由某些 Bootstrap 3 类的渲染方式引起的。就我而言，我有一个包含该类的 div .col-md-12，并且在该 div 内有包含相当复杂内容的选项卡。在打印预览中，最后几页总是丢失，即使在开发工具中启用打印 CSS 模拟时，所有内容都存在。该类.col-md-12适用于 992px 及以上的宽度，这表明这.col-lg-12可能会导致相同的打印问题。当我删除这个类时，所有内容都在打印中正确呈现，没有丢失页面。

删除后我并没有损失太多.col-md-12，我只是确保了具有该类的顶部 div 的.container样式为width: 100%，并且还添加padding: 0 15px;到了我上面提到的 div（之前由 提供）中.col-md-12。这是一种解决方法，但它解决了打印截断问题。最新版本的 Chrome (55.0.2883.75 m) 的行为与 54 完全相同。 据报道，Chrome 53 根本没有这个问题，Firefox 或 IE 也没有。

希望这可以帮助。