ブートストラップ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列の単純なレイアウトがあると仮定します。小型デバイスの場合、列を25％/ 75％に分割する必要があります。

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

小さなデバイスの場合、.col-sm-*クラスを使用します。

2つの列に次のクラスを追加します。

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

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

.col-sm-3

.col-sm-9

例

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

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

33.3％/ 66.6％の分割の場合は、andを使用.col-sm-4します.col-sm-8（50％/ 50％の分割の場合は、andを使用.col-sm-6します.col-sm-6）：

.col-sm-4

.col-sm-8

.col-sm-6

例

<div class="container-fluid">
<div class="row">
    <div class="col-sm-4 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-8 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
</div>
</div>


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

自動レイアウト列

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

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

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


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

2の1/2

2 of 2

1/4

2/4

3/4

4/4

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

❮ 前次 ❯

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