Bootstrap4で縦の領域はcolクラスを使って分ける事になります。
縦幅を均等に分けたい場合
均等に縦幅を分けたい場合はrowの中にcolを好きな数だけ作ればOKです。
例えばrowの中にcolが1つだけならrowの領域が全て確保されます。
colが2つあれば、rowの領域が2等分され、3つなら3等分されます。
|
1 2 3 4 |
<div class="row"> <div class="col bg-red">この領域は２等分されます。</div> <div class="col bg-blue">この領域は２等分されます</div> </div> |
サンプルを載せておきますね。
指定した大きさで縦幅を分けたい場合
均等に縦幅を分けたくない場合には「col」の後に縦幅の大きさを表す数字を付けたクラスを指定します。
この数字は1〜12まで指定する事ができます。
制限が1つあり、rowの中colの合計が12を超えないように指定する必要があります。
※12を超えて指定した場合、横に並べる事ができず次の段落に表示される事になります。
|
1 2 3 4 |
<div class="row"> <div class="col-4 bg-red">この領域は4/12</div> <div class="col-8 bg-blue">この領域は8/12</div> </div> |
こちらもサンプルを載せておきます。
上記2つBootstrap4の縦領域を分けるが基本になります。
領域を分ける事が出来れば、後はコンテンツを配置していくだけでサイトが完成しますね。
意外と簡単です。
