Google Chromeからブートストラップページを印刷すると、印刷されたページの切り捨ての高さが原因となる場合があります

Question

http://getbootstrap.com/examples/jumbotron/とbootsrap v 3.3.7のGoogle Chrome v。54.0.2840.99 m（64ビット） 、最大化されたウインドウ1920pxモニターで、A4横フォーマットでページを印刷しようとすると、印刷プレビュー（および保存されたPDFまたは印刷ページ）の高さが切り捨てられます。

が

• Chromeから印刷する（Firefoxのv50.0.1およびIE11問題が中には存在しない）
• のcols：この特定のケースで
  ではなくときの状況この1
  の高さは2ページでなければなりませんウィンドウの幅が992pxより大きいか等しい場合、上記のブーストラップの例では、スクリーンモードで印刷している間に折りたたまれていないので、printを押してください。992pxより小さく、printを押してください。印刷プレビューは切り捨てられません）
• 単一用紙の高さは、ブートストラップページよりも短縮される（十分なコンテンツが存在しないため、上記のブートストラップ例A4タテで問題を再現していない）

私はすべての.col-**-*からfloat:left;を削除する場合に気づい印刷プレビューは切り捨てられませんが、単一の列テンプレートが印刷に必ずしも適していないことは明らかです。

オリジナルのブートストラップの例でもバグを複製できます。
印刷モードでブートストラップグリッドを取得するにはどうすればよいですか？印刷されたページはChromeで切り捨てられませんか？

Answer 1

Chrome 54+ではこの問題が発生していますが、これは特定のBootstrap 3クラスがレンダリングされる方法に起因すると考えられます。私の場合、.col-md-12クラスのdivがありました。そのdivの中にかなり複雑な内容のタブがありました。印刷プレビューでは、開発ツールでは、印刷CSSエミュレーションを有効にすると、すべてのコンテンツが存在していたにもかかわらず、最後の数ページは常に欠落していました。 .col-md-12クラスは、992px以上の幅に適用されます。これは、.col-lg-12がおそらく同じ印刷問題を引き起こすことを示唆しています。このクラスを削除すると、すべてが正しく印刷され、欠落したページは表示されませんでした。

私は.col-md-12を除去することによって、多くを失うことはありませんでした、私はちょうど.containerクラスを持つトップのdivがwidth: 100%としてスタイルされることを保証した、とも以前.col-md-12によって提供された私は上記のdivにpadding: 0 15px;を追加しました。これは回避策ですが、印刷切捨ての問題を解決します。 Chromeの最新バージョン（55.0.2883.75 m）は54とまったく同じように動作します。Chrome 53にはこの問題はまったくなく、FirefoxやIEも報告されていません。

これが役に立ちます。

Answer 2

私のプロジェクトでは同じ問題がありました。時間のデバッグ後、私は.containerで100％の幅を設定するとすべて正常に動作することを発見しました。 私のソリューションは、次のとおりです。

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

Answer 3

私もこの問題を見てきました。私はそれが私だけではないのでうれしいです。スクリーン・ビューポートを変更するとプリント出力が変化するという事実は特に奇妙です。

とにかく、私は@ artemの解決策を試しましたが、成功しませんでした。

は私が最終的にやった：それはすべての山車を削除すると、すべての状況では動作しない場合があり

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

を。しかし、私の比較的単純なレイアウトで印刷を行うだけで十分でした。

Answer 4

それはクロームのバグ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; 
    }