グリッドシステム

強力なモバイルファーストフレックスボックスグリッドを使用して、12 カラムシステム、5 つのデフォルトレスポンシブ層、Sass 変数と mixin、および多数の定義済みクラスのおかげで、あらゆる形状とサイズのレイアウトを構築します。

使い方

Bootstrap のグリッドシステムは、一連のコンテナー、行、および列を使用して、コンテンツのレイアウトと配置を行います。フレックスボックスで構築されており、完全にレスポンシブです。以下は例であり、グリッドがどのように組み合わされるかを詳しく見ていきます。

flexbox は初めてですか、またはよく知りませんか? 背景、用語、ガイドライン、およびコードスニペットについては、この CSS トリックフレックスボックスガイドをお読みください。

3 つの列の 1 つ

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

上記の例では、定義済みのグリッドクラスを使用して、小型、中型、大型、特大のデバイスに 3 つの等幅の列を作成します。これらの列は、親とともにページの中央に配置されます.container。

それを分解すると、これがどのように機能するかです：

コンテナーは、サイトのコンテンツを中央に配置し、水平方向にパディングする手段を提供します。.containerレスポンシブピクセル幅、またはすべてのビューポートとデバイスサイズで.container-fluid使用します。width: 100%
行は列のラッパーです。各列には、それらの間のスペースを制御するための水平padding(ガターと呼ばれる) があります。これpaddingは、負のマージンを持つ行で打ち消されます。このようにして、列のすべてのコンテンツが左側に視覚的に配置されます。
グリッドレイアウトでは、コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます。
フレックスボックスのおかげで、指定されていないグリッド列widthは自動的に等幅の列としてレイアウトされます。たとえば、の 4 つのインスタンス.col-smはそれぞれ、小さなブレークポイントから 25% 幅になります。その他の例については、列の自動レイアウトのセクションを参照してください。
列クラスは、行ごとに可能な 12 のうち、使用したい列の数を示します。したがって、3 つの等幅の列が必要な場合は、を使用できます.col-4。
列widthはパーセンテージで設定されるため、常に流動的で、親要素に対して相対的なサイズになります。
padding列には、個々の列の間にガターを作成するための水平がありますが、を使用してmargin行とpadding列からを削除できます。.no-gutters.row
グリッドをレスポンシブにするために、レスポンシブブレークポイントごとに 1 つずつ、合計 5 つのグリッドブレークポイントがあります。すべてのブレークポイント (極小)、小、中、大、および特大です。
グリッドブレークポイントは、最小幅のメディアクエリに基づいています。つまり、その 1 つのブレークポイントとその上のすべてのブレークポイントに適用されます(たとえば、.col-sm-4小、中、大、特大のデバイスには適用されますが、最初のxsブレークポイントには適用されません)。
定義済みのグリッドクラス ( など.col-4) またはSass mixinを使用して、より意味のあるマークアップを行うことができます。

一部の HTML 要素を flex コンテナーとして使用できないなど、flexbox に関する制限とバグに注意してください。

グリッドオプション

Bootstrap はems またはrems を使用してほとんどのサイズを定義しますが、pxs はグリッドのブレークポイントとコンテナーの幅に使用されます。これは、ビューポートの幅がピクセル単位であり、フォントサイズによって変化しないためです。

Bootstrap グリッドシステムの側面が複数のデバイスでどのように機能するかを、便利な表で確認してください。

	極小 <576px	小 ≥576px	中 ≥768px	大 ≥992px	特大 ≥1200px
最大コンテナ幅	なし（自動）	540px	720px	960px	1140px
クラスプレフィックス	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
列数	12
ガター幅	30px (列の両側に 15px)
ネスト可能	はい
列の順序	はい

自動レイアウト列

のような明示的な番号付けされたクラスを使用せずに、簡単に列のサイズを変更するために、ブレークポイント固有の列クラスを利用します.col-sm-6。

等幅

たとえば、からまでのすべてのデバイスとビューポートに適用される 2 つのグリッドレイアウトを次に示しxsますxl。必要なブレークポイントごとに任意の数の単位のないクラスを追加すると、すべての列が同じ幅になります。

1/2

2/2

1/3

2/3

3/3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

等幅の列は複数の行に分割できますが、Safari flexbox のバグがあり、明示的なflex-basisorなしでは機能しませんでしたborder。古いバージョンのブラウザーには回避策がありますが、最新の状態であれば必要ありません。

桁

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

1 列幅の設定

フレックスボックスグリッド列の自動レイアウトは、1 つの列の幅を設定し、兄弟列のサイズを自動的に変更できることも意味します。定義済みのグリッドクラス (以下を参照)、グリッドミックスイン、またはインライン幅を使用できます。中央の列の幅に関係なく、他の列のサイズが変更されることに注意してください。

1/3

2/3 (より広い)

3/3

1/3

2/3 (より広い)

3/3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

可変幅コンテンツ

クラスを使用col-{breakpoint}-autoして、コンテンツの自然な幅に基づいて列のサイズを調整します。

1/3

可変幅コンテンツ

3/3

1/3

可変幅コンテンツ

3/3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

等幅複数列

.w-100列を改行する場所にを挿入して、複数の行にまたがる等幅の列を作成します。をレスポンシブ表示ユーティリティ.w-100と組み合わせて、ブレークをレスポンシブにします。

列

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

レスポンシブクラス

Bootstrap のグリッドには、複雑なレスポンシブレイアウトを構築するための 5 層の定義済みクラスが含まれています。極小、小、中、大、または特大のデバイスで列のサイズをカスタマイズします。

すべてのブレークポイント

最小のデバイスから最大のデバイスまで同じグリッドの場合は、クラス.colと.col-*クラスを使用します。特にサイズの列が必要な場合は、番号付きクラスを指定します。それ以外の場合は、自由に固執して.colください。

列

col-8

col-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

水平に積み上げ

クラスの 1 つのセットを使用し.col-sm-*て、小さなブレークポイント ( ) で水平になる前にスタックされた基本的なグリッドシステムを作成できますsm。

col-sm-8

col-sm-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

ミックス＆マッチ

いくつかのグリッド層に列を単純に積み上げたくないですか? 必要に応じて、層ごとに異なるクラスを組み合わせて使用します。すべてがどのように機能するかについてのより良いアイデアについては、以下の例を参照してください。

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

アライメント

flexbox 整列ユーティリティを使用して、列を垂直方向および水平方向に整列させます。

垂直方向の配置

3 つの列の 1 つ

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

3 つの列の 1 つ

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

水平方向の配置

2 つの列のうちの 1 つ

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ガターなし

事前定義されたグリッドクラスの列間のガターは、で削除できます.no-gutters。これにより、すべての直接の子列から負marginの s.rowと水平方向が削除されます。padding

これらのスタイルを作成するためのソースコードは次のとおりです。列のオーバーライドは、最初の子列のみにスコープが設定され、属性セレクターを介して対象となることに注意してください。これにより、より具体的なセレクターが生成されますが、列のパディングは、スペーシングユーティリティでさらにカスタマイズできます。

端から端までの設計が必要ですか? 親.containerまたはをドロップし.container-fluidます。

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

実際には、次のようになります。これは、他のすべての事前定義されたグリッドクラス (列幅、レスポンシブティア、並べ替えなどを含む) で引き続き使用できることに注意してください。

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

列のラッピング

12 を超える列が 1 つの行に配置されている場合、余分な列の各グループは 1 つの単位として新しい行に折り返されます。

.col-9

.col-4
9 + 4 = 13 > 12 なので、この 4 列幅の div は、1 つの連続した単位として新しい行にラップされます。

.col-6
後続の列は新しい行に沿って続きます。

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

段区切り

フレックスボックスで列を新しい行に分割するには、小さなハックが必要width: 100%です。列を新しい行にラップしたい場所に with 要素を追加します。通常、これは複数.rowので実現されますが、すべての実装方法でこれを説明できるわけではありません。

.col-6 .col-sm-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

また、レスポンシブ表示ユーティリティを使用して、特定のブレークポイントでこのブレークを適用することもできます。

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

並べ替え

クラスの注文

.order-クラスを使用して、コンテンツの表示順序を制御します。これらのクラスはレスポンシブなので、orderブレークポイント (例: .order-1.order-md-2) を設定できます。5 つのグリッド層すべてにわたる1スルーのサポートが含まれます。12

最初に、しかし順不同

2番目だが最後

3番目、しかし最初

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

また、レスポンシブクラス.order-firstと( ) をそれぞれ適用して要素の.order-lastを変更するクラスもあります。これらのクラスは、必要に応じて番号付きクラスと混在させることもできます。orderorder: -1order: 13order: $columns + 1.order-*

最初だけど最後

2 番目、ただし順不同

3番目、しかし最初

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

列のオフセット

.offset-レスポンシブグリッドクラスとマージンユーティリティの 2 つの方法でグリッド列をオフセットできます。グリッドクラスは列に一致するようにサイズ設定されますが、オフセットの幅が可変であるクイックレイアウトには余白がより便利です。

オフセットクラス

.offset-md-*クラスを使用して列を右に移動します。これらのクラスは、列の左マージンを列ごとに増やし*ます。たとえば、 4 つの列を.offset-md-4移動.col-md-4します。

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

レスポンシブブレークポイントでの列のクリアに加えて、オフセットのリセットが必要になる場合があります。グリッドの例でこれを実際に見てください。

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

証拠金ユーティリティ

v4 のフレックスボックスへの移行により、マージンユーティリティを使用し.mr-autoて、兄弟列を互いに離すことができます。

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

ネスティング

コンテンツを既定のグリッドにネストするには、既存の列内に新しい.row一連の列を追加します。ネストされた行には、合計が 12 以下になる一連の列を含める必要があります (使用可能な 12 列すべてを使用する必要はありません)。.col-sm-*.col-sm-*

レベル 1: .col-sm-9

レベル 2: .col-8 .col-sm-6

レベル 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

サスミックスイン

Bootstrap のソース Sass ファイルを使用する場合、Sass 変数と mixin を使用して、カスタム、セマンティック、および応答性の高いページレイアウトを作成するオプションがあります。事前定義されたグリッドクラスは、これらと同じ変数と mixin を使用して、すぐに使用できるクラスのスイート全体を提供し、迅速に応答するレイアウトを実現します。

変数

変数とマップは、列の数、余白の幅、および浮動列を開始するメディアクエリポイントを決定します。これらを使用して、上記の事前定義されたグリッドクラスを生成するだけでなく、以下にリストするカスタムミックスインにも使用します。

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

ミックスイン

Mixin はグリッド変数と組み合わせて使用され、個々のグリッド列のセマンティック CSS を生成します。

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

使用例

変数を独自のカスタム値に変更するか、ミックスインをデフォルト値で使用することができます。以下は、既定の設定を使用して、間に隙間のある 2 列のレイアウトを作成する例です。

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

メインコンテンツ

二次コンテンツ

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

グリッドのカスタマイズ

組み込みのグリッド Sass 変数とマップを使用すると、事前定義されたグリッドクラスを完全にカスタマイズできます。階層の数、メディアクエリのサイズ、およびコンテナーの幅を変更してから、再コンパイルします。

柱と樋

グリッド列の数は、Sass 変数を介して変更できます。$grid-columns個々の列の幅 (パーセント単位) を生成するために使用されますが、列のガターに対して$grid-gutter-width均等に分割されるブレークポイント固有の幅を許可padding-leftしますpadding-right。

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

グリッド層

列自体を超えて、グリッド層の数をカスタマイズすることもできます. 4 つのグリッド層だけが必要な場合は、$grid-breakpointsand$container-max-widthsを次のように更新します。

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass 変数またはマップに変更を加える場合は、変更を保存して再コンパイルする必要があります。そうすることで、列幅、オフセット、および順序付けのための定義済みグリッドクラスの新しいセットが出力されます。レスポンシブ可視性ユーティリティも、カスタムブレークポイントを使用するように更新されます。px( rem、em、またはではなく)にグリッド値を設定してください%。

グリッドシステム

使い方

グリッド オプション

自動レイアウト列

等幅

1 列幅の設定

可変幅コンテンツ

等幅複数列

レスポンシブ クラス

すべてのブレークポイント

水平に積み上げ

ミックス＆マッチ

アライメント

垂直方向の配置

水平方向の配置

ガターなし

列のラッピング

段区切り

並べ替え

クラスの注文

列のオフセット

オフセットクラス

証拠金ユーティリティ

ネスティング

サス ミックスイン

変数

ミックスイン

使用例

グリッドのカスタマイズ

柱と樋

グリッド層

グリッドオプション

レスポンシブクラス

サスミックスイン