Bootstrap で作ったサイトを見たまんま印刷したいぃぃぃ! を書き直しました

bootstrap系のサイトで「ページの印刷がうまくいかない」のは、ちょいちょいあることで。主に

 

画像が表示されない

ことと

カラムレイアウトが乱れる

こと

 

見たまんまに印刷されないのは、Bootstrapのおせっかいによるところが大きいわけで

画像が表示されないばかりか、ご丁寧にURLが印刷される(;´Д`)

そして、カラムレイアウトが解除されて、1カラム表示されてしまう。

解除されてしまうのは、col-sm-、col-md-、col-lg- で書いた場合で、col-xs(bootstrap ver3まで)で書いていれば大丈夫。

つまり、スマホレイアウトになってしまうんですよね。

 

なので、大きいサイズの画像を、分割したカラムにはめ込んでいたりすると、全画面で印刷されてびっくりしたりします。

 

という訳で、その余計なおせっかい部分を読み込まないようにすれば良いということでした。

Bootstrapのカスタマイズページhttp://getbootstrap.com/customize/)を開いて、Print media styles を外したBootstrapを作成して、それを読み込むようにすれば良いわけですね。

サイトによっては、media=”screen”とmedia=”print”に分けて読み込むようにする必要があります。

なんでスマホレイアウトなんじゃ!?

と、これだけでイケてるつもりでいたのですが、Print media styles を外したBootstrap を読み込むだけでは1カラム問題は解決していなかったのです。

たまたま、そういう部分がなかったので気が付きませんでした。

で、その対処としては、以下のコードを読み込むようにします。

 

これで1カラム問題も解決

 

と、思っていたら、Bootstrap 4では、これではダメ

Bootstrap 4 では、こちらのコードを使用します(まだ良く確かめていないので、間違いがあるかもしれませんが)