Bootstrapでスマホだけ余白を無くして画面いっぱいに表示するためのCSS
どうもpei(@pei_babo)です。
みんな大好きBootstrapですが、スマートフォンで見る時はちょっと画面の左右の余白が大きすぎる気がしますよね。
そもそも画面が小さいスマートフォンですから、出来る限り広く使いたいものです。
ただPCは余白があった方がスッキリすると思うので、今回はスマホだけ対応させるCSSです。
ちなみにやりたいイメージはこんな感じです。
プログラミングやWordPressを習得するのに一番近道な方法とは?
Bootstrapでスマホだけ余白を無くすCSS
それではCCSを載せますね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style> /* スマホ横画面用 */ @media screen and (max-width: 480px) { .container{padding:0} div[class^="col-"] {padding:0} .row {margin:0;} } /* スマホ縦画面用 */ @media screen and (max-width: 320px) { .container{padding:0} div[class^="col-"] {padding:0} .row {margin:0;} } </style> |
このCSSをBootstrap読み込みより後に設置すればOKです。
小ネタですが、誰かのお役に立てれば嬉しいです。