グリッド 自動レイアウト
2021-07-01
参考サイト1：https://www.webdesignleaves.com/pr/plugins/bootstrap4_01.html
参考サイト2：https://getbootstrap.jp/docs/4.2/layout/grid/
自動レイアウト
中の要素の幅、padding等によっては意図しないところでカラム落ちする場合がありますのでご注意ください。
等幅
「col」「col-sm」など、「-n」部分を書かない場合、全ての列が同じ幅になるようにできます。
col
col
col
col
col
|
1 2 3 4 5 6 7 |
<div class="row"> <div class="col"><p class="gray-box">col</p></div> <div class="col"><p class="Blue-box">col</p></div> <div class="col"><p class="gray-box">col</p></div> <div class="col"><p class="Blue-box">col</p></div> <div class="col"><p class="gray-box">col</p></div> </div> |
1つの列に幅指定
１つの列に幅を指定する場合、幅を指定していない要素は等幅になります。
col
col-4
col
col
col
|
1 2 3 4 5 6 7 |
<div class="row"> <div class="col"><p class="gray-box">col</p></div> <div class="col-4"><p class="Blue-box">col-4</p></div> <div class="col"><p class="gray-box">col</p></div> <div class="col"><p class="Blue-box">col</p></div> <div class="col"><p class="gray-box">col</p></div> </div> |
複数の列に幅指定
複数の列に幅を指定しても、幅を指定していない要素は等幅になります。
col
col-4
col
col-3
col
|
1 2 3 4 5 6 7 |
<div class="row"> <div class="col"><p class="gray-box">col</p></div> <div class="col-4"><p class="Blue-box">col-4</p></div> <div class="col"><p class="gray-box">col</p></div> <div class="col-3"><p class="Blue-box">col-3</p></div> <div class="col"><p class="gray-box">col</p></div> </div> |
