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