Bootstrapには、端末またはviewportのサイズ増加に対して、 適切に12個のカラムを拡大するレスポンシブ且つモバイルファーストなFluidグリッドシステムが含まれています。 よりセマンティックなレイアウトを生成するための強力なmixinだけでなく、 レイアウトを容易にするための予め定義されたクラスが含まれています。

• 入門
• メディアクエリー
• グリッドオプション
• 例: 縦積みから水平並びへ
• 例: Fluidコンテナ
• 例: モバイルとデスクトップ
• 例: モバイル、タブレット、デスクトップ
• 例: カラムの行送り
• レスポンシブなカラムのリセット
• カラムのオフセット
• カラムの入れ子
• カラムの順序
• Lessのmixinと変数

入門

グリッドシステムは、コンテンツに含まれる行(row)とカラム(col)によるページ構成のために使用されます。 Bootstrapのグリッドシステムの使い方は下記のとおりです。

• 行(row)は適切にalignとpaddingを設定するために、 .container(固定幅)、または.container-fluid(全体幅)の内部に配置しなければいけません。
• カラム(col)の水平グループを作成するために、行(row)を使用します。
• コンテンツはカラム(col)内に配置される必要があり、カラム(col)だけが行(row)の直下の子になることが許されます。
• .rowや.col-xs-4のような予め定義されたグリッドのクラスは、 グリッドレイアウトを素早く作るために利用されます。 また、Lessのmixinもよりセマンティックなレイアウトにするために使用されます。
• カラム(col)はpaddingによる溝(カラム間の空白)を作ります。 row内の最初と最後のカラム(col)のpaddingは、 .rowのネガティブマージンによって打ち消されます。
• 後述する例がアウトデント(訳注:インデントの逆)されているのは、ネガティブマージンの影響です。 そのためグリッドカラム内のコンテンツは、グリッドが適用されないコンテンツと同じ線上に揃います。
• グリッドカラムは、12のカラムの中から、広げたい幅のカラム数を割り当てることによって作成されます。 例えば、カラムを3等分したいのであれば、3つの.col-xs-4を使用します。
• もし、1つの行(row)の内部に12を超えるカラム(col)が配置された場合、 はみ出したカラムの各グループはひとつの固まりとして、次の新しい行に送られます。
• グリッドクラスは、定められた区切りサイズと同じ、またはそれ以上のスクリーン幅の端末に適用されます。 それより小さい端末を対象とする場合は、グリッドクラスを上書きします。 そのため、.col-md-*クラスの要素への割り当ては、 中型(medium)端末にだけではなく、 .col-lg-*クラスが提供されていないとしても、大(large)サイズの端末にもそのスタイルが影響します。

後述する例を確認しながら、これらの決まりをあなたのコードに適用してみてください。

メディアクエリー

Lessファイル内で下記のメディアクエリーを使用して、グリッドシステムで重要となる区切り(ブレイクポイント)を作成・定義します。

/* より小型な端末(768pxより小さい携帯等)は、 */
/* Bootstrapのデフォルトが適用されるため、メディアクエリーはありません */

/* 小型(Small)端末 (タブレット、768px以上) */
@media (min-width: @screen-sm-min) { ... }

/* 中型(Medium)端末 (デスクトップ、992px以上) */
@media (min-width: @screen-md-min) { ... }

/* 大型(Large)端末 (大画面デスクトップ、1200px以上) */
@media (min-width: @screen-lg-min) { ... }

時折、これらのメディアクエリーに対してより端末を限定するために、 CSSに上限を定めるmax-widthを含めた拡張をすることがあります。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

グリッドオプション

下記の早見表で、Bootstrapのグリッドシステムが複数の端末でどのような表示になるのかを確認してください。

	より小型な 端末 携帯 (<768px)	小型端末 タブレット (≥768px)	中型端末 デスクトップ (≥992px)	大型端末 デスクトップ (≥1200px)
グリッドの挙動	常に水平並び	区切り(ブレイクポイント)まで水平並び、下回ると崩壊(縦積み)
コンテナ幅	None (auto)	750px	970px	1170px
クラス接頭辞	.col-xs-	.col-sm-	.col-md-	.col-lg-
カラム数	12
カラム幅	Auto	~62px	~81px	~97px
溝の幅	30px (カラムの両側が15px)
入れ子可能	◯
オフセット	◯
カラム順序	◯

例: 縦積みから水平並びへ

.col-md-*のクラスだけを使用して、 モバイルとタブレットの端末(extra small ～ small)では縦積みになり、 デスクトップ(medium)端末からは水平並びになる基本的なグリッドシステムを作成することができます。 .row内にグリッドカラムを配置します。

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

例: Fluidコンテナ

.containerを.container-fluidに変更することで、 固定幅のグリッドレイアウトを全体幅のレイアウトに切り替えます。

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

例: モバイルとデスクトップ

小さな端末で見た時に、単純に縦積みにされてしまうのはお気に召しませんか？ .col-xs-*と.col-md-*をカラムに追加することで、 より小さな端末(extra small)と中型端末(medium)のグリッドクラスを使用することができます。 下記の例で、どのように使用するのかを確認してください。

<!-- モバイル上で、100%幅と50%幅で縦積みされます -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- モバイル上では50%幅、デスクトップ上では33.3%幅になります -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- モバイルでもデスクトップでも、カラムは常に50%幅です。-->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

例: モバイル、タブレット、デスクトップ

タブレットの.col-sm-*クラスを使用して、更に動的で強力なレイアウトを作成することで、 前述した例を組み上げてみましょう。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- 任意: コンテンツがheightにマッチしない場合、xsのカラムをclearします。-->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

例: カラムの行送り

1つの行に12を超えるカラムが配置された場合、はみ出したカラムの各グループは、1つの固まりとして新しい行に送られます。

レスポンシブなカラムのリセット

例えば、グリッドを4つ並べて使用していた場合に特定の区切り(ブレイクポイント)で、 1つのカラムが他のカラムよりも高いために、適切にclearされず、右に寄せられるという問題が発生するケースがあります。 これを修正するために、.clearfixとBootstrapのレスポンシブ・ユーティリティクラスを組み合わせて使用します。

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

  <!-- 必要となるビューポートでのみ、特別なclearfixを追加します -->
  <div class="clearfix visible-xs-block"></div>

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

レスポンシブの区切り(ブレークポイント)でのカラムのclearに加え、 オフセット(offset)、順序の変更(push、pull)のリセットが必要になるかもしれません。 グリッド使用例(Offset, push, and pull resets)の動きを確認してください。

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-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 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

カラムのオフセット

.col-md-offset-*クラスを使用して、カラムを右に移動することができます。 これらのクラスは、*カラム分の幅を左マージンに対して増量します。 例えば、.col-md-offset-4であれば、4カラム分移動されます。

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

カラムの入れ子

デフォルトのグリッドを使用してコンテンツを入れ子にするには、 既存の.col-sm-*内に新しい.rowと.col-sm-*のセットを追加します。 入れ子にされた行(row)は、12以下のカラムの集まりを含める必要があります。 (12カラム全てを使用する必要はありません)

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

カラムの順序

.col-md-push-*と.col-md-pull-*の修飾クラスを使用して、 組み込みのグリッドカラムの順序を簡単に変更することができます。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Lessのmixinと変数

素早くレイアウトするための組み込みのグリッドクラスに加え、 Bootstrapにはシンプルでセマンティックなレイアウトを短時間で作成するためのLess変数とmixinが含まれています。

変数

変数は、カラム数、溝の幅、カラムがfloatが始まるメディアクエリー位置(サイズ)を決定します。 これらは、下記にリスト化されているカスタムmixiと同様に、 このドキュメント内で説明されている定義済みのグリッドシステムを生成するのに使用されます。

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

mixinは独自グリッドカラムのために、セマンティックなCSSを生成するグリッド変数と混合して使用されます。

// 一連のカラムを包むラッパーを作成
.make-row(@gutter: @grid-gutter-width) {
  // floatされたカラムをclear
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // 入れ子の行(row)のネガティブマージンは、
  // カラムのコンテンツに揃えようとします
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// より小型の(xs)カラムの作成
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // 空の場合に崩壊(collapse)からカラムを保護します
  min-height: 1px;
  // paddingによる内部の溝(gutter)
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // カラム数をもとにwidthを算出
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// 小型(small)カラムを作成
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // 空の場合に崩壊(collapse)からカラムを保護します
  min-height: 1px;
  // paddingによる内部の溝(gutter)
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // カラム数をもとにwidthを算出
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// 小型(small)カラムのオフセット(offset)を作成
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// 中型(medium)カラムを作成
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // 空の場合に崩壊(collapse)からカラムを保護します
  min-height: 1px;
  // paddingによる内部の溝(gutter)
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // カラム数をもとにwidthを算出
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// 中型(medium)カラムのオフセット(offset)を作成
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// 大型(large)カラムを作成
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // 空の場合に崩壊(collapse)からカラムを保護します
  min-height: 1px;
  // paddingによる内部の溝(gutter)
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // カラム数をもとにwidthを算出
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// 大型(large)カラムのオフセット(offset)を作成
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

使用例

独自のカスタム値を変数を割り当てることも、mixinのデフォルト値の値をそのまま使用することも可能です。 この例ではデフォルトの設定を使用して、間に隙間を持つ2つのカラムレイアウトを作成しています。

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

 Back to top