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

大きなグリッドの例

	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％の分割として設計の方が優れている場合があります。

大型デバイスは、 992ピクセルから1199ピクセルの画面幅を持つものとして定義されます。

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

Bootstrapは、「小さいサイズでは、-sm-が含まれているクラスを見て、それらを使用します。中サイズでは、-md-が含まれているクラスを見て、それらを使用します。大きいサイズでは、 -lg-という単語が含まれているクラスとそれらを使用します。

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

.col-sm-3 .col-md-6 .col-lg-4

.col-sm-9 .col-md-6 .col-lg-8

例

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

注：合計が12以下になるようにしてください（使用可能な12列すべてを使用する必要はありません）。

大容量のみを使用

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

例

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

自動レイアウト列

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

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

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


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

2の1/2

2 of 2

1/4

2/4

3/4

4/4

❮ 前次 ❯

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