【Bootstrap3】横幅の余白が大きすぎて邪魔だよと思う方は必見!
Bootstrap3はページ全体を中央寄せにする際は基本的に<div>
のcontainerクラスを使うかと思いますが、これを使うと画面の横の余白が大きすぎて気になる。
まさに
「余白あり過ぎない?」
状態である。
プログラミングやWordPressを習得するのに一番近道な方法とは?
containerクラスの中身
Bootstrap3のcontainerクラスはCSS3のMediaQueriesで画面サイズに応じてmax-widthを細かく設定しています。
↓みたいになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | @media (min-width: 768px) { .container { max-width: 750px; } } @media (min-width: 992px) { .container { max-width: 970px; } } @media (min-width: 1200px) { .container { max-width: 1170px; } } |
このmax-widthをちょっと変更すれば余白が気にならなくなります。
余白を良い感じにする方法
まずはBootstrapをカスタマイズする用の自作のCSSを置きましょう。
(※色々カスタマイズする為に作っておいた方が良いと思います。)
必ずBootstrap本体CSSより下で指定してくださいね。
■自作CSSを指定
1 2 3 4 | // Bootstrapのcss本体 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> // Bootstrapカスタマイズ用の自作CSS (本体より下で指定する) <link href="../css/my-bootstrap.css" rel="stylesheet"> |
■自作CSS内
1 2 3 | .container { max-width: 100%; } |
終わり!
これだけで余白が良い感じになります。
ブラウザを横に小さくしていっても全てのサイズで余白は一定の左右15pxだけ空くので良い感じです。
ちなみに左右15pxだけ空くのは下記のようにBootstrapのCSSで設定されているからですね。
1 2 3 4 5 6 | .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } |
もし、この15pxも邪魔!と思う方は自作のCSS内でpaddingを上書きしてやれば変更出来ます。
一応デモページも用意しましたので宜しければ。
以上、ノンデザイナーなプログラマな方にお役に立てればうれしいです^^