コラム

フレックスボックスグリッドシステムのおかげで、整列、順序付け、およびオフセットのいくつかのオプションを使用して列を変更する方法を学びます。さらに、列クラスを使用して非グリッド要素の幅を管理する方法を参照してください。

このページでは

注意喚起！グリッド列を変更およびカスタマイズする方法に飛び込む前に、まずグリッドページを必ずお読みください。

それらがどのように機能するか

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

アライメント

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 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>

列のラッピング

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

<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

<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) を設定できます。6 つのグリッド層すべてにわたる1スルーのサポートが含まれます。5

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-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-firstとクラスもあります。これらのクラスは、必要に応じて番号付きクラスと混在させることもできます。.order-lastorderorder: -1order: 6.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-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 のフレックスボックスへの移行により、マージンユーティリティを使用し.me-autoて、兄弟列を互いに離すことができます。

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

<div class="container">
  <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% 上の幅

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

クラスをユーティリティと一緒に使用して、レスポンシブなフローティングイメージを作成できます。テキストが短い場合は、コンテンツを.clearfixラッパーでラップしてフロートをクリアしてください。

プレースホルダーテキストの段落。ここでは、clearfix クラスの使用法を示すために使用しています。ここでは、列がフロート画像とどのように相互作用するかを示すために、かなりの数の意味のないフレーズを追加しています。

ご覧のとおり、パラグラフはフローティング画像を優雅に包み込みます。ここで、具体的な情報をまったく伝えていないこの退屈なプレースホルダーテキストだけでなく、実際のコンテンツがここにあるとどのように見えるか想像してみてください。それは単にスペースを占有するだけであり、実際に読むべきではありません。

それでもなお、あなたはこのプレースホルダーテキストを読むことにまだ辛抱強く取り組んでおり、さらなる洞察やコンテンツの隠されたイースターエッグを期待しています。冗談です、たぶん。残念ながら、ここにはそれがありません。

<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>