使用Google Chrome打印Bootstrap页面时，有时会导致打印页面高度被截断。

Question

从官方模板http://getbootstrap.com/examples/jumbotron/开始，使用Google Chrome v. 54.0.2840.99 m（64位）在最大化的窗口1920px监视器上尝试以A4横向格式打印页面时，打印预览（以及保存的PDF或打印页面）会被切断高度。
在这种特定情况下，应该有2个页面高度而不是1个页面。
发生这种情况时：

• 从Chrome打印（在Firefox v50.0.1和IE11中不存在此问题）
• 当列未折叠并且我在屏幕模式下打印时（在上述boostrap示例中，当窗口的宽度大于或等于 992px 并按印刷。如果窗口小于992px，并且我按印刷，则打印预览不会被截断）
• 单张纸的高度比引导页面短（在上述引导示例中，A4垂直不会再现此问题，因为没有足够的内容）

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

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

- Zberno

Answer 1

我也遇到了这个问题。很高兴不止我一个人有这个问题。如果更改屏幕视口会影响打印输出的事实特别奇怪。

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

最终，我做了以下操作：

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

这种方法可能并不适用于所有情况，因为它会删除所有浮动元素。但对于我的相对简单的布局来说，它足以使打印正常工作。

- magicroundabout

---

我发现我需要同时进行容器宽度调整和浮动清除。 - Colin

Answer 2

我在我的项目中遇到了同样的问题。经过几个小时的调试，我发现如果在.container上设置宽度为100%，所有内容都能正常工作。 我的解决方案是：

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

- Artem

Answer 3

我在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也没有报告此问题。

希望这可以帮助到您。

- Daniel Tofan

Answer 4

这是一个Chrome浏览器的漏洞https://bugs.chromium.org/p/chromium/issues/detail?id=732834#c12，但你可以在bootstrap.min.css文件中的3个位置添加“screen and”这几个词来修复它。

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

- Anon