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

从这个官方模板开始：
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截断？

解决方法

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

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

我最终做了：

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

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

原文地址：https://www.jb51.cc/css/215278.html