グリッド ブレイクポイント
2021-06-02
参考サイト1：https://www.webdesignleaves.com/pr/plugins/bootstrap4_01.html
参考サイト2：https://getbootstrap.jp/docs/4.2/layout/grid/
colブレイクポイント
「-n」の「n」は数字が入ります。
今まで通り「1～12」でグリッド数を指定。
bootstrap3と大体同じところでレイアウトの切り替えをするとしたら、
col-xs-n=col-n
col-sm-n=col-md-n
col-md-n=col-lg-n
で使うのが今までの感覚と一番近いかと思います。
h3見出しにpxサイズとそのサイズが当てはまる端末を書いていますが、端末はスマホでもタブレットでもAndroidやiOS等、種類が多岐にわたるため断定は難しいです。
参考程度に思ってください。
全幅適用（スマホ～PC）
col-n
col-6
col-6
|
1 2 3 4 |
<div class="row"> <div class="col-6"><p class="gray-box">col-6</p></div> <div class="col-6"><p class="Blue-box">col-6</p></div> </div> |
576px以上適用（スマホ横にしたときの幅～PC）
col-sm-n
col-sm-6
col-sm-6
|
1 2 3 4 |
<div class="row"> <div class="col-sm-6"><p class="gray-box">col-sm-6</p></div> <div class="col-sm-6"><p class="Blue-box">col-sm-6</p></div> </div> |
768px以上適用（タブレット～PC）
col-md-n
col-md-6
col-md-6
|
1 2 3 4 |
<div class="row"> <div class="col-md-6"><p class="gray-box">col-md-6</p></div> <div class="col-md-6"><p class="Blue-box">col-md-6</p></div> </div> |
992px以上適用（タブレット横にしたときの幅～PC）
col-lg-n
col-lg-6
col-lg-6
|
1 2 3 4 |
<div class="row"> <div class="col-lg-6"><p class="gray-box">col-lg-6</p></div> <div class="col-lg-6"><p class="Blue-box">col-lg-6</p></div> </div> |
1200px以上適用（～PC）
col-xl-n
col-xl-6
col-xl-6
|
1 2 3 4 |
<div class="row"> <div class="col-xl-6"><p class="gray-box">col-xl-6</p></div> <div class="col-xl-6"><p class="Blue-box">col-xl-6</p></div> </div> |
1～12
col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div class="row"> <div class="col-1"><p class="gray-box">col-1</p></div> </div> <div class="row"> <div class="col-2"><p class="Blue-box">col-2</p></div> </div> <div class="row"> <div class="col-3"><p class="gray-box">col-3</p></div> </div> <div class="row"> <div class="col-4"><p class="Blue-box">col-4</p></div> </div> <div class="row"> <div class="col-5"><p class="gray-box">col-5</p></div> </div> <div class="row"> <div class="col-6"><p class="Blue-box">col-6</p></div> </div> <div class="row"> <div class="col-7"><p class="gray-box">col-7</p></div> </div> <div class="row"> <div class="col-8"><p class="Blue-box">col-8</p></div> </div> <div class="row"> <div class="col-9"><p class="gray-box">col-9</p></div> </div> <div class="row"> <div class="col-10"><p class="Blue-box">col-10</p></div> </div> <div class="row"> <div class="col-11"><p class="gray-box">col-11</p></div> </div> <div class="row"> <div class="col-12"><p class="Blue-box">col-12</p></div> </div> |
