コンテナ

それらがどのように機能するか

コンテナーは、Bootstrap の最も基本的なレイアウト要素であり、デフォルトのグリッド システムを使用するときに必要です。コンテナーは、コンテナー内のコンテンツを格納、パディング、および (場合によっては) 中央に配置するために使用されます。コンテナーは入れ子にすることができますが、ほとんどのレイアウトでは入れ子になったコンテナーは必要ありません。

Bootstrap には 3 つの異なるコンテナーが付属しています。

• .container、max-width各レスポンシブ ブレークポイントに を設定します
• .container-fluid、これはwidth: 100%すべてのブレークポイントにあります
• .container-{breakpoint}、width: 100%指定されたブレークポイントまで

次の表は、各コンテナーが元のコンテナーと比較され、各ブレークポイントがどのように変化するかを示していmax-widthます。.container.container-fluid

それらを実際に見て、グリッドの例で比較してください。

デフォルトのコンテナ

デフォルト.containerのクラスはレスポンシブな固定幅のコンテナーです。つまり、max-width各ブレークポイントで変更されます。

<div class="container">
  <!-- Content here -->
</div>

レスポンシブ コンテナ

レスポンシブ コンテナーを使用すると、指定されたブレークポイントに到達するまで 100% 幅のクラスを指定できます。その後max-width、より高いブレークポイントごとに s を適用します。たとえば、ブレークポイントに到達.container-smするまで 100% 幅で開始し、ブレークポイントで、、、およびでスケールアップします。smmdlgxlxxl

<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 セクションを参照してください。