メインコンテンツにスキップ ドキュメント ナビゲーションにスキップ
in English

コンテナ

コンテナーは、特定のデバイスまたはビューポート内でコンテンツを格納、パディング、整列する Bootstrap の基本的なビルディング ブロックです。

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

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

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

  • .containermax-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% 幅で開始し、ブレークポイントで、、、およびでスケールアップします。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 セクションを参照してください。