グリッド offset
2021-07-01
参考サイト1：https://www.webdesignleaves.com/pr/plugins/bootstrap4_01.html
参考サイト2：https://getbootstrap.jp/docs/4.2/layout/grid/
参考サイト3：https://webnetamemo.com/coding/bootstrap4/201902227791
今まで
col-○○-n col-○○-offset-n
新しいoffset
col-○○-n offset-○○-n
offsetの方から「col」が無くなって、「offset」を始めに書くようになりました。
「-n」の「n」は数字が入ります。offsetの場合「1~11」で指定します。
「○○」の部分にはどの幅まで適用させるかのブレイクポイントの指定をしてください。
ブレイクポイントはこちらをご参照ください。
offsetで指定したところを打ち消したい場合は「offset-○○-0」で余白が消えます。
よく使う基本offset
要素を中央寄せにします。
col-10 offset-1
|
1 2 3 4 5 |
<div class="row"> <div class="col-md-10 offset-md-1"> <p class="gray-box">col-10 offset-1</p> </div> </div> |
応用offset
要素を中央寄せにするのによく使っていましたが、他にも応用できます。
要素を交互に
col-7
col-7 offset-5
|
1 2 3 4 5 6 7 8 |
<div class="row"> <div class="col-7"> <p class="gray-box">col-7</p> </div> <div class="col-7 offset-5"> <p class="Blue-box">col-7 offset-5</p> </div> </div> |
真ん中に余白
col-4
col-4 offset-4
|
1 2 3 4 |
<div class="row"> <div class="col-4"><p class="gray-box">col-4</p></div> <div class="col-4 offset-4"><p class="Blue-box">col-4 offset-4</p></div> </div> |
カラムをとばす
col-3 offset-3
col-3 offset-3
|
1 2 3 4 |
<div class="row"> <div class="col-3 offset-3"><p class="gray-box">col-3 offset-3</p></div> <div class="col-3 offset-3"><p class="Blue-box">col-3 offset-3</p></div> </div> |
考え方としては、
rowを12分割して、使いたい幅を「col-○○-n」で指定
12から使いたい幅を引いた分を「offset-○○-n」で指定
という感じです。
よく使う要素を中央寄せにする「offset」のヤツの場合、
rowを12分割して、使いたい幅を「col-○○-n」で指定
12から使いたい幅を引いた分を2で割って「offset-○○-n」で指定
という感じです。
