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は画面サイズに合わせて流動的にリサイズされる。
イメージとしては、表示幅が滑らかに変わる感じ。
こっちでも適切にマージンを指定すれば左右に余白を作れるので、基本はこっちでいい気がする。
