从 Google Chrome 打印引导页面会导致（有时）截断打印页面的高度答案

【问题标题】：Printing a bootstrap page from Google Chrome cause (sometimes) truncation height of the printed page从 Google Chrome 打印引导页面会导致（有时）截断打印页面的高度
【发布时间】：2017-04-13 09:11:54
【问题描述】：

从这个官方模板开始： 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 中不存在该问题）
当我在屏幕模式下打印时列没有折叠时（在上面的 boostrap 示例中，当窗口的宽度大于或等于 992px 并按打印。如果窗口是小于 992px 并且我按下打印，打印预览不会被截断）
单张纸高度比bootstrap页面短（上面bootstrap例子A4 Vertical因为内容不够，所以没有复现问题）

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

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

【问题讨论】：

标签： css google-chrome twitter-bootstrap-3 printing height

【解决方案1】：

这是一个 chrome 错误 https://bugs.chromium.org/p/chromium/issues/detail?id=732834#c12，但您可以在 bootstrap.min.css 的 3 个位置添加“屏幕和”字样来修复它：

@media screen and (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }

@media screen and (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }

@media screen and (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }

【讨论】：

【解决方案2】：

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

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

我最终做到了：

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

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

【讨论】：

我发现我需要同时做容器宽度和删除浮动

【解决方案3】：

我的项目中遇到了同样的问题。经过数小时的调试，我发现如果在.container 上将宽度设置为 100%，一切正常。我的解决方案是：

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

【讨论】：

【解决方案4】：

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

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

希望这会有所帮助。

【讨论】：