BootStrapでcontainerの幅を変更する方法

レスポンシブWEBデザインを手軽に実現できるツールとして、BootStrapは大変助かってます。
あれだけ少ないコードの量で済むので、作業がとても楽なのです。
まぁ、ソース全体でみれば、bootstrapのライブラリ分があるので、サイトの重さ的には変わらないと思いますが。

さて、そこでデザインの話に行くわけですが、レスポンシブは基本可変グリッドを使うわけですけども、その際bootstrapでは、containerというクラスを使うと、ページの左右に余白を作ることができます。ただ、私としてはもう少し余白が欲しかったので、レスポンシブを維持したまま、PCビューの際は固定レイアウトのように、左右の余白を大きめに取れないかなと、色々調べてみたところ、container-fluidというクラスを使えば、要件が実現できることを知りました。

<使い方>

まず、現在「container」クラスを使っているところを、「container-fluid」に変更します。

そして、CSSで下記のように「container-fluid」を定義します。

.container-fluid {
margin-right: auto;
margin-left: auto;
max-width: 900px; //例えば
}

 

<参考サイト>

bootstrap – 固定レイアウトと可変レイアウト

以上、どうぞお試しあれ。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です