3.1 をダウンロードしたところ、ドキュメントに見つかりました...
.container最も外側の要素を に変更することで、固定幅のグリッド レイアウトを全幅レイアウトに変換します.container-fluid。
を見ると、は と同一であるbootstrap.cssように見えます。どちらも同じ CSS を持ち、 のすべてのインスタンスは とペアになっており、すべての列クラスはパーセンテージで指定されています。.container-fluid.container.container-fluid.container
例をいろいろ試してみたところ、すべてが流動的に見えたので、違いはわかりませんでした。
Bootstrap .container クラスと .container-fluid クラスの違いは何ですか?
ベストアンサー1
クイック バージョン: .container Bootstrap の各画面サイズ (xs、sm、md、lg) に対して 1 つの固定幅があり、.container-fluid使用可能な幅に合わせて拡張されます。
と の違いはcontainer、container-fluid次の CSS 行から生じます。
@media (min-width: 568px) {
.container {
width: 550px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
ウェブページが表示されているビューポートの幅に応じて、containerクラスは div に特定の固定幅を与えます。これらの線は のどの形式でも存在しないためcontainer-fluid、ビューポートの幅が変わるたびに幅も変わります。
たとえば、ブラウザ ウィンドウの幅が 1000 ピクセルだとします。これは最小幅の 992 ピクセルより大きいため、.container要素の幅は 970 ピクセルになります。その後、ブラウザ ウィンドウをゆっくりと広げていきます。幅は 1200 ピクセルに達するまで変化しません。1200 ピクセルに達すると幅は.container1170 ピクセルにジャンプし、それ以上のブラウザ幅でもその幅のままになります。
.container-fluid一方、ブラウザの幅を少しでも変更すると、要素のサイズは常に変化します。