ツイッター-ブートストラップ

容器液と容器



Container Fluid Container



この記事の翻訳元： コンテナ-流体と.container

3.1をダウンロードして、ドキュメントで見つけました... 3.1をダウンロードして、ドキュメントに記載されています...



最も外側の.containerを変更して、固定幅のグリッドレイアウトを全幅のレイアウトに変更します。 〜.container-fluid 。 最も外側に配置することにより.container変更.container-fluid固定幅のグリッドレイアウトを全幅のレイアウトに変換します。

bootstrap.cssを見る、.container-fluidのようです.containerと同じです。 表示bootstrap.css 、.container-fluid対.container同じように見えます。 どちらも同じCSSを持ち、.container-fluidのすべてのインスタンスがあります.containerとペアになっています、およびすべての列クラスはパーセンテージで指定されます。 どちらも同じCSSを持ち、各インスタンスは.container-fluid一致しています.container 、およびすべてのカテゴリのパーセンテージ要件。



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

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

＃1階

参照： https://stackoom.com/question/1VPRX/コンテナ流体とコンテナ



＃2階

containerと言っていると思いますvs container-fluidグリッドに対する応答性と非応答性の違いです。 私はあなたが意味すると思いますcontainer対container-fluidそれはレスポンシブグリッドと非レスポンシブグリッドの違いです。 これは真実ではありません...何を言っているのかというと、幅は固定されていません...その全幅です！ これは真実ではありません...それは幅が固定されていないことを意味します...その全幅！

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

例1 例1

container-fluid ： container-fluid ：

http://www.bootply.com/119981 http://www.bootply.com/119981

これで、コンテナが画面全体をどのように占めるかがわかります...これはcontainer-fluidです。 。 これで、コンテナが画面全体をどのように占めるかがわかります...これはa container-fluidです。 。

次に、もう一方の通常のcontainerを見てみましょう。プレビューの端を見てください さて、普通の別のものを見てみましょうcontainerそしてプレビューの端を観察してください

例2 例2

container

http://www.bootply.com/119982 http://www.bootply.com/119982

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

編集 編集

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

http://www.bootply.com/119983 http://www.bootply.com/119983

これが少し明確になるのに役立つことを願っています！ これが少し明確になることを願っています！

＃3階

クイックバージョン： .containerブートストラップの画面サイズごとに1つの固定幅があります（xs、sm、md、lg） Expressバージョン： .containerブートストラップの各画面サイズに固定幅を設定します（xs、sm、md、lg） .container-fluid使用可能な幅を満たすように拡張します。 .container-fluid使用可能な幅を埋めるために展開します。

containerの違いおよびcontainer-fluid CSSのこれらの行から来ています： container with container-fluidの違いは、次のCSSにあります。

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

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

たとえば、ブラウザウィンドウの幅が1000pxだとします。 たとえば、ブラウザのウィンドウ幅が1000pxであるとします。 最小幅の992pxより大きいため、.container要素の幅は970pxになります。 最小幅の992pxより大きいため、.container要素の幅は970pxです。 次に、ブラウザウィンドウをゆっくりと広げます。 次に、ブラウザウィンドウをゆっくりと展開します。 .containerの幅1200pxに達するまで変更されません。1200pxに達すると、幅が1170pxにジャンプし、ブラウザの幅が大きくなってもそのままになります。 your .container幅は1200pxに達するまで変更されません。幅は、1170pxにジャンプし、ブラウザの幅が大きくなります。

あなたの.container-fluid一方、要素は、ブラウザの幅にわずかな変更を加えても、常にサイズが変更されます。 一方、ブラウザの幅に最小限の変更を加えたため、.container-fluid要素のサイズは変更され続けます。

＃4階

両方.containerおよび.container-fluidレスポンシブです（つまり、画面の幅に基づいてレイアウトを変更します）が、さまざまな方法で（名前を付けても、そのように聞こえないことはわかっています）。 .container with .container-fluidどちらもレスポンシブです（つまり、画面の幅に応じてレイアウトを変更します）が、方法は異なります（名前を付けても、そのように聞こえないことはわかっています）。

簡潔な答え： 簡潔な答え：

.containerびくびく/途切れ途切れのサイズ変更であり、 .containerジャンプ/途切れ途切れのサイズ調整であり、

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

機能の観点から： 機能的な観点から：

.container-fluidウィンドウ/ブラウザの幅を任意の量だけ変更すると、サイズが継続的に変更され、.containerとは異なり、側面に余分な空きスペースがなくなります。します。 ウィンドウ/ブラウザの幅を変更すると、.container-fluidサイズを変更し続けると、次のようにはなりません.container両側に余分な空白が残ります。 （したがって、命名：「デジタル」、「離散」、「チャンク」、または「量子化」ではなく「流体」）。 （したがって、名前：「数値」、「離散」、「ブロッキング」、または「量子化」の代わりに「フロー」）。

.containerいくつかの特定の幅でチャンクにサイズ変更します。 .container特定の幅のいくつかのブロックでサイズを変更します。 言い換えれば、それは異なる特定の別名「固定」幅、異なる範囲の画面幅になります。 言い換えれば、それは異なる特定の「固定」幅、異なる画面幅範囲になります。

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

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

基本的な観点から： 基本的な観点から：

.container-fluid CSSプロパティがありますwidth: 100% .container-fluid CSSプロパティwidth: 100% 、したがって、画面幅の粒度ごとに継続的に再調整されます。 、したがって、各画面幅の粒度を継続的に調整します。

.container-fluid { width: 100% }

.container 'width = 800px'（またはem、remなど）のようなものがあり、さまざまな画面幅での特定のピクセル幅の値です。 .container 'width = 800px'（またはem、remなど）、さまざまな画面幅の特定のピクセル幅値などがあります。 もちろん、これが、画面の幅が画面の幅のしきい値を超えたときに、要素の幅が突然別の幅にジャンプする原因です。 もちろん、画面幅が画面幅のしきい値を超えると、要素の幅が突然別の幅にジャンプします。 また、そのしきい値はCSS3メディアクエリによって管理されます。これにより、画面幅の範囲など、さまざまな条件にさまざまなスタイルを適用できます。 しきい値は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メディアは、バックグラウンドガイダンスによって実装されている方法を質問しました（コードに対するJKillianの回答を参照）。

＃5階

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

最新のブートストラップを入手するには、stackoverflowに関するこの投稿を読んでください。 見てみな 。 最新のブートストラップを入手するには、stackoverflowに関するこの記事を読んでください。 確認してください 。

＃6階

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

.container-fluidウィンドウ/ブラウザの幅を任意の量だけ変更すると、継続的にサイズが変更されます。 ウィンドウ/ブラウザの幅を変更するときは、.container-fluid常にサイズを調整してください。

.container-fluidメディアクエリによって制御される、いくつかの特定の幅でチャンクにサイズ変更します（技術的には、ピクセル値が指定されているため、「固定幅」と言えますが、そこで停止すると、サイズを変更できない、つまり応答しないという印象を受ける可能性があります。） .containerメディアクエリによって制御される特定の幅の数ブロックでサイズを変更します（技術的には、ピクセル値が指定されているため、「固定幅」と言えますが、そこで停止すると、人々はそれを取得できる可能性があります」 tインプレッションのサイズを変更します。つまり、応答がありません。）