コンテナ Containers

仕組み

ContainersはBootstrapで最も基本的なレイアウト要素であり、デフォルトのgridシステムを使用する場合は必須です。Containersは、その中にコンテンツを格納、パディング、および（場合によっては）中央揃えするために使用されます。Containersはネストすることができますが、ほとんどのレイアウトではネストされたcontainerは必要ありません。

Bootstrapには3つの異なるcontainersがあります：

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

以下の表は、各containerのmax-widthが、各breakpointで元の.containerと.container-fluidとどのように比較されるかを示しています。

Gridの例で実際に確認し、比較してください。

デフォルトcontainer

デフォルトの.container classは、レスポンシブな固定幅containerであり、各breakpointでmax-widthが変更されます。

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

レスポンシブcontainers

レスポンシブcontainersを使用すると、指定されたbreakpointに到達するまで100%幅のclassを指定でき、その後、より高いbreakpointsごとにmax-widthを適用します。例えば、.container-smは、sm breakpointに到達するまで100%幅で開始され、その後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>

Fluid containers

.container-fluidを使用して、ビューポートの全幅にまたがる全幅containerを作成します。

<div class="container-fluid">
  ...
</div>

CSS

Sass変数

上記のように、Bootstrapは、希望するレイアウトを構築するのに役立つ一連の事前定義されたcontainer classesを生成します。これらの事前定義されたcontainer classesをカスタマイズするには、それらを動かすSass map（_variables.scssにあります）を変更します：

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sass mapsと変数の変更方法の詳細と例については、Gridドキュメントのsassセクションを参照してください。

Sass mixins

Sassをカスタマイズすることに加えて、Sass mixinを使用して独自のcontainersを作成することもできます。

// 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();
}