ブートストラップ4グリッド-特大

XLargeグリッドの例

	Extra small	Small	Medium	Large	Extra Large
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Screen width	<576px	>=576px	>=768px	>=992px	>=1200px

前の章では、中小規模のデバイスのクラスを使用したグリッドの例を示しました。2つのdiv（列）を使用し、小型デバイスでは25％/ 75％の分割、中型デバイスでは50％/ 50％の分割、大型デバイスでは33％/ 66％の分割を行いました。

ただし、xlargeデバイスでは、20％/ 80％の分割として設計の方が優れている場合があります。

特大のデバイスは、 1200ピクセル以上の画面幅を持つものとして定義されます。

xlargeデバイスの場合、次の.col-xl-*クラスを使用します。

次の例では、小さいデバイスで25％/ 75％に分割され、中程度のデバイスで50％/ 50％に分割され、大きいデバイスで33％/ 66％に分割され、xlargeデバイスで20％/ 80％に分割されます。非常に小さなデバイスでは、自動的にスタックします（100％）：

col-sm-3 col-md-6 col-lg-4 col-xl-2

col-sm-9 col-md-6 col-lg-8 col-xl-10

例

<div class="container-fluid">
<div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>Sed ut perspiciatis...</p>
    </div>
</div>
</div>

注：合計が常に12になるようにしてください。

XLargeのみを使用

.col-xl-6以下の例では、クラスのみを指定しています（ .col-lg-*、、.col-md-*および/または.col-sm-*）は指定していません。これは、xlargeデバイスが50％/ 50％に分割されることを意味します。ただし、大、中、小、および超小型のデバイスの場合、垂直方向にスタックします（幅100％）。

例

<div class="container-fluid">
<div class="row">
    <div class="col-xl-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-xl-6">
      <p>Sed ut perspiciatis...</p>
    </div>
</div>
</div>

自動レイアウト列

Bootstrap 4では、すべてのデバイスに同じ幅の列を作成する簡単な方法があります。から番号を削除し、指定された数のcol要素.col-xl-*でのみ.col-xlクラスを使用します。ブートストラップは列の数を認識し、各列は同じ幅になります。

画面サイズが1200px未満の場合、列は水平方向にスタックされます。

<div class="row">
<div class="col-xl">1 of 2</div>
<div class="col-xl">2 of 2</div>
</div>


<div class="row">
<div class="col-xl">1 of 4</div>
<div class="col-xl">2 of 4</div>
<div class="col-xl">3 of 4</div>
<div class="col-xl">4 of 4</div>
</div>

2の1/2

2 of 2

1/4

2/4

3/4

4/4

❮ 前次 ❯

ブートストラップ4チュートリアル