ブートストラップ4グリッドスタックから水平
ブートストラップ4グリッドの例：スタックから水平へ
大きなデバイスで水平になる前に、非常に小さなデバイスでスタックすることから始まる基本的なグリッドシステムを作成します。
次の例は、単純な「スタックから水平」の2列レイアウトを示しています。つまり、自動的にスタック（100％）される非常に小さな画面を除いて、すべての画面で50％/ 50％に分割されます。
col-sm-6
col-sm-6
例：スタックから水平
<div class="container">
<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>
ヒント：.col-sm-*クラスの数値は、divがまたがる列の数を示します（12列のうち）。したがって、.col-sm-11列に.col-sm-4またがる、4列に
.col-sm-6またがる、6列にまたがるなどです。
注：
合計が12以下になるようにしてください（使用可能な12列すべてを使用する必要はありません）。
ヒント：クラスを次のように変更することで、任意の固定幅レイアウトを全幅レイアウトに変えることができます。.container.container-fluid
例：液体容器
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
自動レイアウト列
Bootstrap 4では、すべてのデバイスに同じ幅の列を作成する簡単な方法があります。から番号を削除し、指定された数のcol要素でのみクラスを
使用します。ブートストラップは列の数を認識し、各列は同じ幅になります。サイズクラスは、列がいつ応答するかを決定します。.col-size-*.col-size
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<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