bootstrap3のcontainerとcontainer_fluidアウターコンテナの詳細説明

この記事では、ootstrap3 のコンテナとコンテナ_流体の違いを主に紹介します。 .container と .container_fluid は、ブートストラップの 2 つの異なるタイプの外部コンテナです。困っている友達は参考にしていただければ幸いです。

.container と .container_fluid は、ブートストラップの 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;
}

関連する推奨事項:

Windows Server 2016 の Hyper-V を介して Liunx コンテナをインストールする方法の詳細な説明 (図)

Container Event コンテナ イベントに基づくLaravel WEB APP

Laravel5のコンテナ、コマンドバス、イベントについて

以上がbootstrap3のcontainerとcontainer_fluidアウターコンテナの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。