GitHubで参照

カラム

フレックスボックスグリッドシステムにより、配置、順序、オフセットのいくつかのオプションを使用してカラムを変更する方法を学習します。さらに、カラムクラスを使用して、グリッド以外の要素の幅を管理する方法も説明します。

このページの内容

重要事項！ グリッドカラムの変更方法とカスタマイズ方法を学ぶ前に、まずグリッドページを参照してください。

動作原理

カラムはグリッドのフレックスボックスアーキテクチャに基づいています。 フレックスボックスを使用することで、個々のカラムを変更したり、行レベルでカラムのグループを変更したりできます。カラムの拡大、縮小、その他の変更方法を選択できます。
グリッドレイアウトを作成する際には、すべてのコンテンツはカラムに入れます。 Bootstrapのグリッドの階層は、コンテナから行、カラム、コンテンツへと続きます。まれに、コンテンツとカラムを組み合わせる場合もありますが、意図しない結果が生じる可能性があることに注意してください。
Bootstrapには、高速でレスポンシブなレイアウトを作成するための事前定義されたクラスが含まれています。 6つのブレークポイントと各グリッド階層で12個のカラムを使用することで、目的のレイアウトを作成するための多数のクラスが既に用意されています。Sassを使用してこれを無効にすることも可能です。

配置

フレックスボックス配置ユーティリティを使用して、カラムを垂直方向と水平方向に配置します。

垂直方向の配置

レスポンシブなalign-items-*クラスを使用して、垂直方向の配置を変更します。

3カラムのうち1つ

HTML

<div class="container text-center">
  <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>

3カラムのうち1つ

HTML

<div class="container text-center">
  <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>

3カラムのうち1つ

HTML

<div class="container text-center">
  <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>

または、レスポンシブな.align-self-*クラスを使用して、各カラムの配置を個別に変更します。

3カラムのうち1つ

HTML

<div class="container text-center">
  <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>

水平方向の配置

レスポンシブなjustify-content-*クラスを使用して、水平方向の配置を変更します。

2カラムのうち1つ

HTML

<div class="container text-center">
  <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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

カラムの折り返し

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

.col-9

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

.col-6
後続のカラムは新しい行に続きます。

HTML

<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%の要素を追加します。通常、これは複数の.rowを使用することで実現されますが、すべての実装方法でこれを考慮できるわけではありません。

.col-6 .col-sm-3

HTML

<div class="container text-center">
  <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

HTML

<div class="container text-center">
  <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を設定できます（例：.order-1.order-md-2）。すべての6つのグリッド階層で1から5をサポートしています。さらに多くの.order-*クラスが必要な場合は、Sass変数を使用してデフォルトの数値を変更できます。

DOM内では先頭、orderは適用されていません

DOM内では2番目、より大きなorderが設定されています

DOM内では3番目、orderが1に設定されています

HTML

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      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: -1とorder: 6をそれぞれ適用することで、要素のorderを変更するレスポンシブな.order-firstと.order-lastクラスもあります。これらのクラスは必要に応じて番号付きの.order-*クラスと混在させることもできます。

DOM内では先頭、最後に配置されています

DOM内では2番目、順序は変更されていません

DOM内では3番目、先頭に配置されています

HTML

<div class="container text-center">
  <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クラス

.offset-md-*クラスを使用して、カラムを右に移動します。これらのクラスは、カラムの左マージンを*カラム分増加させます。たとえば、.offset-md-4は.col-md-4を4カラム分移動します。

.col-md-4

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

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

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

HTML

<div class="container text-center">
  <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

HTML

<div class="container text-center">
  <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でのフレックスボックスへの移行に伴い、.me-autoなどのマージンユーティリティを使用して、兄弟カラムを互いに離すことができます。

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

HTML

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

スタンドアロンカラムクラス

.col-*クラスは、.rowの外で使用して、要素に特定の幅を与えることもできます。カラムクラスが行の子として直接使用されない場合、パディングは省略されます。

.col-3：幅25％

.col-sm-9：smブレークポイント以上で幅75％

HTML

<div class="col-3 p-3 mb-2">
  .col-3: width of 25%
</div>

<div class="col-sm-9 p-3">
  .col-sm-9: width of 75% above sm breakpoint
</div>

これらのクラスは、ユーティリティと組み合わせて、レスポンシブなフロート画像を作成するために使用できます。テキストが短い場合は、フロートをクリアするために、コンテンツを.clearfixラッパーでラップしてください。

プレースホルダーテキストの段落です。ここでは、clearfixクラスの使用を示すために使用しています。フロート画像とカラムの相互作用を示すために、意味のないフレーズをいくつか追加しています。

ご覧のとおり、段落はフロート画像の周りをうまく折り返します。ここで、この退屈なプレースホルダーテキストではなく、実際のコンテンツがあるとどうなるかを想像してみてください。このテキストは単にスペースを占めており、実際には有益な情報は何も伝えません。

それでも、あなたはここでプレースホルダーテキストを読み進めており、より多くの洞察や隠されたイースターエッグのようなコンテンツを期待しています。ジョークかもしれません。残念ながら、ここでは何もありません。

HTML

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>