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;
    }
}

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效