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

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

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

これで、Bootstrapは、「小さいサイズでは、-sm-が含まれているクラスを見て、それらを使用します。中サイズでは、-md-が含まれているクラスを見て、それらを使用します」と言います。

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

.col-sm-3 .col-md-6

.col-sm-9 .col-md-6

例

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

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

ミディアムのみを使用

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

例

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

自動レイアウト列

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

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

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


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

2の1/2

2 of 2

1/4

2/4

3/4

4/4

次の章では、大型デバイスに異なる分割パーセントを追加する方法を示します。

❮ 前次 ❯

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