bootstrap3のコンテナcontainerの詳細な解釈

.container と .container_fluid は、ブートストラップの 2 つの異なるタイプの外部コンテナーです。この記事では主に bootstrap3 のcontainerとcontainer_fluidの違いを紹介します。必要な方は参考にしてください

.containerと.container_fluidはbootstrapの2つの異なるタイプの外部コンテナです。公式の声明によると、この2つの違いは次のとおりです。

.containerクラスは固定幅のコンテナに使用され、レスポンシブレイアウトをサポートします。

.container-fluid クラスは、幅 100% でビューポート全体を占めるコンテナに使用されます。

いわゆる固定幅では、開発者がコンテナの幅を自分で設定することはできませんが、ブートストラップは画面の幅に基づいて内部でメディア クエリを使用して、固定幅の設定を支援し、適応性があります。

程度で適応可能です。いかなる状況でも、レスポンシブ レイアウトの外側のレイアウト コンテナーに固定幅の値を手動で設定しないでください。

.container-fluid は外側のウィンドウの 100% に自動的に設定され、外側のウィンドウが body の場合、画面サイズに関係なく全画面表示され、レスポンシブ レイアウトが自動的に実装されます。

以下は参照用に借用したコードです:

/*0-768px以上宽度container为100%*/
.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}
/*768-992px以上宽度container为750px*/
@media (min-width: 768px) {
 .container {
 width: 750px;
 }
}
/*992-1200px以上宽度container为970px*/
@media (min-width: 992px) {
 .container {
 width: 970px;
 }
}
/*1200px以上宽度container为1170px*/
@media (min-width: 1200px) {
 .container {
 width: 1170px;
 }
}
/*container-fluid为100%*/
.container-fluid {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

上記は私が皆さんのためにまとめたものです。将来的に皆さんのお役に立つことを願っています。

関連記事:

vueのフォルダー構造構成について

vue-cliを使用してインターフェースプロキシを構成する方法

NodeJsでファイルを転送するためにフォームデータ形式を使用する方法

WeChat内Mini プログラムで画像の遅延読み込みを実装する方法

以上がbootstrap3のコンテナcontainerの詳細な解釈の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。