2

col-md-* に設定された div に表示されるコンテンツは、印刷時に積み重ねて 100% 幅で表示されます。私の現在の修正は、div を col-xs-* に変更することであり、誰も小さなデバイスでページを表示しようとしないことを願っています。

col-sm-* の印刷レイアウトを水平のままにするために、print.less の @print ディレクティブに何を追加できるかについて、少しガイダンスが必要です。72dpi での印刷ページのピクセル幅は 540px の範囲であることを理解しています。これが、ページが col-sm-* で折り返されている理由です。現在、私の印刷CSSには次のものがあります:

[class*="col-sm-"]{ float: left; }

これはうまくいきますが、私の当面の必要性を満たしている可能性がありますが、おそらく未知の副作用があります。デフォルトでは画面上では大きすぎるため、印刷CSSのフォントをすでに96%に縮小しています。これは、col-sm-* クラスで横方向に印刷した場合、画面上で折り返されるレイアウトがきれいに見えることを意味します。おそらく 11 列まではすべて並べて表示され、ページの余白と読みやすさのためのグリッド パディングが考慮されます。

編集:これはjsFiddleですが、htmlをレンダリングする方法が原因で、そこで動作を複製することはできません>> JS Fiddle

4

0 に答える 0