從Google Chrome打印引導頁面原因（有時）打印頁面的截斷高度

Question

從此官方模板開始： http://getbootstrap.com/examples/jumbotron/ bootsrap v.3.3.7和使用谷歌瀏覽器v.54.0.2840.99 m（64位） ，在最大化窗口1920px顯示器上，當我嘗試以A4橫向格式打印頁面時，打印預覽（和保存的PDF或打印頁面）被高度截斷。
在這種特殊情況下應該是2頁的高度，而不是1
這件事發生時：

• 打印從瀏覽器（在Firefox v50.0.1和IE11的問題是不存在的）
• 當的cols當我在屏幕模式下打印時（在上面的推拉示例中，當窗口的寬度大於或等於992px並按打印。如果窗口小於992px並且我按打印，打印預覽未被截斷）
• 的單張紙高度縮短比引導頁面（在上面的引導例如A4縱向不重現該問題，因爲沒有足夠的內容）

我注意到，如果我從刪除float:left;所有.col-**-*的打印預覽不會截斷，但顯然單列模板並不總是適合打印。

您也可以在原始引導示例上覆制該錯誤。
如何在打印模式下獲得引導網格，並且打印頁面不會被Chrome截斷？

Answer 1

我在Chrome 54+中看到過這個問題，它似乎是由某些Bootstrap 3類的渲染方式引起的。在我的情況下，我有一個有.col-md-12類的div，在那個div裏面我有一些標籤，內容相當複雜。在打印預覽中，最後幾頁始終缺失，儘管在開發工具中，當啓用打印CSS模擬時，所有內容都存在。 .col-md-12類適用於寬度992px及以上，這表明.col-lg-12可能會導致相同的打印問題。當我刪除這門課時，所有內容都在打印中正確渲染，沒有丟失頁面。

我沒有通過刪除.col-md-12失去很多，我只是確保具有.container類頂格被稱呼爲width: 100%，並且還增加了對padding: 0 15px;這是以前由.col-md-12提供我上面提到的DIV。這是一種解決方法，但它解決了打印截斷問題。據報道，最新版本的Chrome（55.0.2883.75米）與54.完全一樣。Chrome 53根本沒有這個問題，Firefox和IE都沒有。

希望這會有所幫助。

Answer 2

我的項目中有同樣的問題。經過幾個小時的調試，我發現如果將寬度設置爲100％，所有工作都可以正常工作。 我的解決方案是：

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

Answer 3

我也看到了這個問題。我很高興這不僅僅是我。如果更改屏幕視口，打印輸出會發生變化，這一點尤其奇怪。

無論如何，我試過@ artem的解決方案，但沒有成功。

我最終沒有：

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

，因爲它消除所有的彩車可能不適用於所有情況。但是在我的相對簡單的佈局上進行打印就足夠了。

Answer 4

這是Chrome錯誤https://bugs.chromium.org/p/chromium/issues/detail?id=732834#c12，但你可以在3個地方加上「屏幕，」你bootstrap.min.css來解決它：

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