bootstrap3のcontainerとcontainer_fluid外部コンテナの違いの説明

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

.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;
}

上記の内容は、bootstrap3のcontainerとcontainer_fluidの外側コンテナの違いの説明です。

関連する推奨事項:

Bootstrap3.0 の学習 (1)_html/css_WEB-ITnose

Bootstrap3.3.2 をすぐに学習する方法

Bootstrap3-新機能

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