Bootstrapの「container-fluid」と「container」って結局どう違うの?
結論
画面の左右に余白をもたせたい場合は「container」
画面いっぱいにコンテンツを表示するなら「container-fluid」
感覚としてはcontainer-fluid
の方が自由が利くので、どっちにするか迷ったらcontainer-fluid
一択で良いんじゃなかろうか。
container
は固定レイアウト用、container-fluid
は流動レイアウトとあるが、768px以下ではcontainer
もcontainer-fluid
も違いがでない。
bootstrapのCSS自体には992pxと1200pxに各々ブレイクポイントが設定されており、この表示幅域でブラウザ幅を広げたり縮めたりすると以下の違いがある。
「container」の場合
container
は画面サイズに合わせて段階的にリサイズされる。
イメージとしては、表示幅がカクカク変わる感じ。
「container-fluid」の場合
container-fluid
は画面サイズに合わせて流動的にリサイズされる。
イメージとしては、表示幅が滑らかに変わる感じ。
こっちでも適切にマージンを指定すれば左右に余白を作れるので、基本はこっちでいい気がする。