Source

グリッドシステム

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

使い方

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

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

3 つの列の 1 つ
3 つの列の 1 つ
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>

等幅複数行

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

明示的なorなしではこれが機能しないというSafari flexbox のバグがありました。古いバージョンのブラウザには回避策がありますが、ターゲット ブラウザがバグのあるバージョンに分類されない場合は必要ありません。flex-basisborder

列
列
列
列 
<div class="container">
  <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>
</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>

レスポンシブ クラス

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

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

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

列
列
列
列
col-8
col-4 
<div class="container">
  <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>
</div>

水平に積み上げ

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

col-sm-8
col-sm-4
col-sm
col-sm
col-sm 
<div class="container">
  <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>
</div>

ミックス＆マッチ

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

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

ガター

ガターは、ブレークポイント固有のパディングと負のマージン ユーティリティ クラスによって、レスポンシブに調整できます。特定の行のガターを変更するには、 の負のマージン ユーティリティ.rowと の一致するパディング ユーティリティをペアにします.col。.containerまたは親も、.container-fluid不要なオーバーフローを避けるために、一致するパディング ユーティリティを使用して調整する必要がある場合があります。

lg大きな ( ) ブレークポイント以上で Bootstrap グリッドをカスタマイズする例を次に示します。.colでパディングを増やし、親でそれ.px-lg-5を打ち消してから、でラッパーを調整しました。.mx-lg-n5.row.container.px-lg-5

カスタム列パディング
カスタム列パディング 
<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

行の列

レスポンシブ.row-cols-*クラスを使用して、コンテンツとレイアウトを最適にレンダリングする列の数をすばやく設定します。通常の.col-*クラスは個々の列 (例: ) に適用されますが、行列のクラスはショートカットとして.col-md-4親に設定されます。.row

これらの行列クラスを使用して、基本的なグリッド レイアウトをすばやく作成したり、カード レイアウトを制御したりします。

桁
桁
桁
桁 
<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
桁
桁
桁
桁 
<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
桁
桁
桁
桁 
<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
桁
桁
桁
桁 
<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>
桁
桁
桁
桁 
<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

付属の Sass mixin も使用できますrow-cols()。

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

アライメント

flexbox 整列ユーティリティを使用して、列を垂直方向および水平方向に整列させます。Internet Explorer 10-11 は、以下に示すようにフレックス コンテナーに がある場合、フレックス アイテムの垂直方向の配置をサポートしません。min-height 詳細については、Flexbug #3 を参照してください。

垂直方向の配置

3 つの列の 1 つ
3 つの列の 1 つ
3 つの列の 1 つ
3 つの列の 1 つ
3 つの列の 1 つ
3 つの列の 1 つ
3 つの列の 1 つ
3 つの列の 1 つ
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 つ
3 つの列の 1 つ
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 つ
2 つの列のうちの 1 つ
2 つの列のうちの 1 つ
2 つの列のうちの 1 つ
2 つの列のうちの 1 つ
2 つの列のうちの 1 つ
2 つの列のうちの 1 つ
2 つの列のうちの 1 つ
2 つの列のうちの 1 つ
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-sm-6 .col-md-8
.col-6 .col-md-4 
<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.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="container">
  <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>
</div>

段区切り

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

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3 
<div class="container">
  <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>
</div>

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

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4 
<div class="container">
  <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>
</div>

並べ替え

クラスの注文

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

DOM の最初、順序は適用されません
DOM で 2 番目、大きい順序で
DOM で 3 番目、順序は 1 
<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

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

DOM の先頭、最後に並べる
DOM の 2 番目、順序なし
DOM の 3 番目、最初の順序 
<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered 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-3 .offset-md-3
.col-md-6 .offset-md-3 
<div class="container">
  <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>
</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="container">
  <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>
</div>

証拠金ユーティリティ

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

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto 
<div class="container">
  <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>
</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="container">
  <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>
</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、列のガターの幅を設定します。

$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、またはではなく)にグリッド値を設定してください%。