Bootstrap 3

【Bootstrap3】横幅の余白が大きすぎて邪魔だよと思う方は必見!

Bootstrap3はページ全体を中央寄せにする際は基本的に<div>のcontainerクラスを使うかと思いますが、これを使うと画面の横の余白が大きすぎて気になる。

まさに
yohaku-arisuginai
「余白あり過ぎない?」

状態である。

プログラミングやWordPressを習得するのに一番近道な方法とは?

containerクラスの中身

Bootstrap3のcontainerクラスはCSS3のMediaQueriesで画面サイズに応じてmax-widthを細かく設定しています。

↓みたいになっています。

このmax-widthをちょっと変更すれば余白が気にならなくなります。

 

余白を良い感じにする方法

まずはBootstrapをカスタマイズする用の自作のCSSを置きましょう。
(※色々カスタマイズする為に作っておいた方が良いと思います。)
必ずBootstrap本体CSSより下で指定してくださいね。

■自作CSSを指定


 
■自作CSS内

終わり!

これだけで余白が良い感じになります。
ブラウザを横に小さくしていっても全てのサイズで余白は一定の左右15pxだけ空くので良い感じです。

ちなみに左右15pxだけ空くのは下記のようにBootstrapのCSSで設定されているからですね。

もし、この15pxも邪魔!と思う方は自作のCSS内でpaddingを上書きしてやれば変更出来ます。

一応デモページも用意しましたので宜しければ。

 

以上、ノンデザイナーなプログラマな方にお役に立てればうれしいです^^

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA