从Google Chrome打印引导页面会导致打印页面的截断高度（有时） [英] Printing a bootstrap page from Google Chrome cause (sometimes) truncation height of the printed page

问题描述

从这个官方模板开始：
http://getbootstrap.com/examples/jumbotron/ 的bootsrap诉3.3.7和谷歌浏览器诉54.0.2840.99米（64位），在最大化窗口1920px监视器上，当我尝试打印A4水平格式的页面打印预览（和保存PDF或打印页面）的高度被截断。

在这个特定情况下，应该是2页高度，而不是1.

这发生在：

• 从Chrome打印（在Firefox v50.0.1和IE11中不存在此问题）


• 当cols没有折叠时在屏幕模式下打印（在上面的示例中，当窗口的宽度大于或等于 992px 时，然后按打印。如果窗口小于 992px ，我按打印时，打印预览不会被截断）


• 单个纸张高度比引导页面缩短（在a bove bootstrap示例A4 Vertical不会因为内容不足而重现此问题）

我注意到如果删除 float：left; 来自所有 .col - ** - * 打印预览不会被截断，但显然单列模板是并非总是适合打印。

您也可以在原始引导示例中复制该bug。

如何在打印模式下获得引导网格和打印的页面不被Chrome截断？

解决方案

我也看到了这个问题。我很高兴这不仅仅是我。如果您更改屏幕视口，打印输出会发生变化，这一点尤其奇怪。

无论如何，我尝试了@ artem的解决方案，但没有成功。
$ b

我最终做了：

  @media print {
 [class * = col-md]，[class * =col-sm]，[class * =col-xs] {
 float：none; 
 
 
 
 
 $ b $ p 
 $ b 
这可能不适用于所有情况，因为它会删除所有漂浮物。但是，在我的相对简单的布局上完成打印就足够了。
 
Starting from this official template:
http://getbootstrap.com/examples/jumbotron/ of bootsrap v. 3.3.7 and using Google Chrome v. 54.0.2840.99 m (64-bit), on maximized window 1920px monitor, when i try to print the page in A4 horizontal format the print preview (and the saved PDF or printed page) is height truncated.

In this specific case should be 2 pages height instead of 1.

This happened when:


Printing from Chrome (in Firefox v50.0.1 and IE11 the issue is not present)
When the cols are not collapsed while i'm printing in screen mode (in the above boostrap example when the width of the window is greater or equal than 992px and press print. If the window is less than 992px and i press print, the print preview is not truncated)
The single paper height is shorten than the bootstrap page (in the above bootstrap example A4 Vertical do not reproduce the issue because there is not enough content)


I noticed that if i remove the float:left;from all the .col-**-* the print preview does not truncate but clearly the single column template is not always suitable for printing.

You can replicate the bug also on the original bootstrap example.

How can I get the bootstrap grid in print mode and the printed page not truncated by Chrome?
解决方案
I have also seen this issue. I'm SO glad it's not just me. The fact that the print output changes if you change the screen viewport is particularly odd.

Anyway, I tried @artem's solution, but without success.

I eventually did:
@media print {
    [class*="col-md"], [class*="col-sm"], [class*="col-xs"] {
        float: none;
    }
}
which may not work for every situation as it removes all the floats. But it was sufficient to get printing working on my relatively simple layout.

                        
这篇关于从Google Chrome打印引导页面会导致打印页面的截断高度（有时）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！