コンテナ
コンテナーは、特定のデバイスまたはビューポート内でコンテンツを格納、パディング、整列する Bootstrap の基本的なビルディング ブロックです。
それらがどのように機能するか
コンテナーは、Bootstrap の最も基本的なレイアウト要素であり、デフォルトのグリッド システムを使用するときに必要です。コンテナーは、コンテナー内のコンテンツを格納、パディング、および (場合によっては) 中央に配置するために使用されます。コンテナーは入れ子にすることができますが、ほとんどのレイアウトでは入れ子になったコンテナーは必要ありません。
Bootstrap には 3 つの異なるコンテナーが付属しています。
.container
、max-width
各レスポンシブ ブレークポイントに を設定します.container-fluid
、これはwidth: 100%
すべてのブレークポイントにあります.container-{breakpoint}
、width: 100%
指定されたブレークポイントまで
次の表は、各コンテナーが元のコンテナーと比較され、各ブレークポイントがどのように変化するかを示していmax-width
ます。.container
.container-fluid
それらを実際に見て、グリッドの例で比較してください。
極小 <576px |
小 ≥576px |
中 ≥768px |
大 ≥992px |
XL ≥1200px |
XX-Large ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
デフォルトのコンテナ
デフォルト.container
のクラスはレスポンシブな固定幅のコンテナーです。つまり、max-width
各ブレークポイントで変更されます。
<div class="container">
<!-- Content here -->
</div>
レスポンシブ コンテナ
レスポンシブ コンテナーを使用すると、指定されたブレークポイントに到達するまで 100% 幅のクラスを指定できます。その後max-width
、より高いブレークポイントごとに s を適用します。たとえば、ブレークポイントに到達.container-sm
するまで 100% 幅で開始し、ブレークポイントで、、、およびでスケールアップします。sm
md
lg
xl
xxl
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
液体容器
.container-fluid
ビューポートの幅全体にわたる、全幅のコンテナに使用します。
<div class="container-fluid">
...
</div>
サス
上に示したように、Bootstrap は一連の事前定義されたコンテナ クラスを生成して、希望するレイアウトの構築を支援します。これらの事前定義されたコンテナー クラスをカスタマイズするには、それらを強化する Sass マップ ( にあります_variables.scss
) を変更します。
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Sass のカスタマイズに加えて、Sass mixin を使用して独自のコンテナーを作成することもできます。
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Sass マップと変数を変更する方法の詳細と例については、Grid ドキュメントの Sass セクションを参照してください。