コンテナー流体と.container

3.1をダウンロードしてドキュメントで見つけました...

最も外側の.containerをに変更して、固定幅グリッドレイアウトを全幅レイアウトに変更します.container-fluid。

を見るとbootstrap.css、と.container-fluid同じであるように見えます.container。両方とも同じCSSを持ち、のすべてのインスタンスは.container-fluidとペアになって.containerおり、すべての列クラスはパーセンテージで指定されています。

例をいじるとき、すべてが流動的であるように見えたので、違いはわかりませんでした。

私はBootstrapを初めて使用するので、何か不足していると思います。誰かが少し時間をかけて私を啓発できますか？

クイックバージョン： .containerブートストラップ（xs、sm、md、lg）の画面サイズごとに1つの固定幅があります。.container-fluid利用可能な幅いっぱいに拡大します。

CSSの次の行containerとの違いはcontainer-fluid次のとおりです。

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Webページが表示されているビューポートの幅に応じて、containerクラスはそのdivに特定の固定幅を与えます。これらの線はのどの形式にも存在しないためcontainer-fluid、ビューポートの幅が変わるたびにその幅が変わります。

たとえば、ブラウザウィンドウの幅が1000pxだとします。最小幅が992pxより大きいため、.container要素の幅は970pxになります。次に、ブラウザウィンドウを徐々に広げます。.container1200pxに達するまで幅は変わりません。1200pxに達すると、幅は1170pxにジャンプし、ブラウザーの幅がこれより広い場合はそのままです。

お使いの.container-fluidブラウザの幅にしても、最小の変更を加えるよう要素は、他の一方で、常にサイズが変更されます。

私は、containervs container-fluidがグリッドに反応するか反応しないかの違いだと言っていると思います。これは真実ではありません...幅が固定されていないということです...その全幅！

これは説明が難しいので、例を見てみましょう

例1

container-fluid：

http://www.bootply.com/119981

これで、コンテナが画面全体を占める方法がわかります...それがcontainer-fluidです。

では、もう1つの法線containerを見て、プレビューの端を見てみましょう。

例2

container

http://www.bootply.com/119982

これで、例の空白が見えますか？固定幅containerだから！両方の例を2つの異なるタブで開いて、前後に切り替える方が理にかなっています。

編集

さらに良いのは、両方のコンテナを同時に使用した例です。今、あなたは本当に違いを知ることができます！

http://www.bootply.com/119983

これが少し明確になったことを願っています！

.containerと.container-fluidはどちらも応答性があります（つまり、画面の幅に基づいてレイアウトが変更されます）が、さまざまな方法で行われます（名前がそのように聞こえないことはわかっています）。

簡潔な答え：

.container びくびく/途切れ途切れのサイズ変更であり、

.container-fluid 幅100％で連続的/細かいサイズ変更。

機能の観点から：

.container-fluidウィンドウ/ブラウザの幅を少しでも変更すると、継続的にサイズが変更され、どのように.containerしても、両側に余分な空きスペースが残りません。（したがって、「デジタル」、「離散」、「チャンク」、または「量子化」ではなく、「流体」という名前が付けられます）。

.containerいくつかの特定の幅でチャンクのサイズを変更します。言い換えると、画面幅の範囲が異なる「固定」幅によって異なります。

セマンティクス：「固定幅」

命名の混乱がどのように発生するかがわかります。技術的に.containerは「固定幅」と言えますが、細かい幅ごとにサイズ変更されないという意味でのみ固定されます。実際にサイズを変更できるため、特定のピクセル幅にとどまるという意味で、実際には「固定」されていません。

基本的な観点から：

.container-fluidCSSプロパティwidth: 100%;があるため、画面幅の細かさで継続的に再調整されます。

.container-fluid {
  width: 100%;
}

.container「width = 800px」（またはem、remなど）のようなもので、異なる画面幅での特定のピクセル幅の値です。もちろん、これが原因で、画面の幅が画面の幅のしきい値を超えたときに、要素の幅が突然別の幅にジャンプします。また、そのしきい値はCSS3メディアクエリによって管理されているため、画面幅の範囲など、さまざまな条件にさまざまなスタイルを適用できます。

@media screen and (max-width: 400px){
  .container {
    width: 123px;
  }
}
@media screen and (min-width: 401px) and (max-width: 800px){

  .container {
    width: 456px;
  }
}
@media screen and (min-width: 801px){
  .container {
    width: 789px;
  }
}

超えて

.containerメディアクエリは.containerバックグラウンドのブートストラップによって実装される方法とまったく同じであるため、要素だけでなく、メディアクエリを介して固定幅要素を応答可能にすることができます（コードについてはJKillianの回答を参照してください）。

ビューポートのサイズにわずかな違いがあっ.container-fluidてもページをシェイプシフトしたい場合に使用します。

「ブレークポイント」とも呼ばれる4種類のサイズのみに.containerページをシェイプシフトする場合に使用します。

サイズに対応するブレークポイントは次のとおりです。

• 極小：（モバイル解像度のみ）
• 小：768ピクセル（タブレット）
• 中：992px（ノートパソコン）
• 大：1200px（ノートパソコン/デスクトップ）

2019年更新

基本的な違いは、container応答性に応じてスケーリングされることですcontainer-fluidが、常にwidth:100%です。したがって、ルートCSS定義では同じように見えますが、さらに調べると、.containerメディアクエリにバインドされていることがわかります。

ブートストラップ4

container5つの幅を持っています...

.container {
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

ブートストラップ3

container4つのサイズを持っています。xs画面上の全幅、およびその幅は、次のメディアクエリに基づいて変化します。

    @media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
    @media (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
    }

コンテナーとコンテナー流体のデモ

.container最大幅のピクセル値がありますが、最大幅.container-fluidは100％です。

.container-fluid ウィンドウ/ブラウザの幅を少しでも変更すると、継続的にサイズが変更されます。

.container メディアクエリによって制御されたいくつかの特定の幅でチャンクにサイズ変更します（技術的には、ピクセル値が指定されているため、「固定幅」と言えますが、そこで停止すると、サイズを変更できない、つまりレスポンシブではないという印象を受ける場合があります。）

ディスプレイの観点から.container見ると、ユーザーが表示しているものをより詳細に制御できます。サイズは、グリッドサイズと同じです。例えば.col-xs、.col-sm、.col、と.col-lg。

つまり、ユーザーテストを行っているときに、4つの異なるサイズのディスプレイでテストすると、すべてのバージョンが表示されます。

.container-fluidwitdhがビューポートの幅に関連しているために使用する場合、表示は動的であるため、バリエーションがはるかに大きくなり、画面が非常に大きいか、画面の幅が一般的でないユーザーは、予期しない結果になる場合があります。

あなたは3.1で正しいです。.container-fluidと.containerは同じであり、コンテナーのように機能しますが、それらを削除すると、.container-fluid（全幅）のように機能します。「モバイルファーストアプローチ」の.container-fluidを削除しましたが、現在は3.3.4に戻ります（動作が異なります）。

最新のブートストラップを取得するには、それが役立つのstackoverflow上でこの記事をお読みくださいそれをチェックアウトします。