ブートストラップのカラムは12、5カラムはいろいろ苦労してました。でもBootstrap5（ブートストラップ5）は思いのほか簡単でした。
Bootstrap5での5カラム
基本、下記コードで5カラムは実現できます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="container"> <div class="row"> <div class="col">カラム①</div> <div class="col">カラム②</div> <div class="col">カラム③</div> <div class="col">カラム④</div> <div class="col">カラム⑤</div> </div> </div> |
7カラムも簡単
⑥と⑦を足せばいい。
でも。。。全て5カラムという使い方はほとんどありませんよね。
PC5列 スマホ2列＋3列
PCでは5列、スマホでは上2列、下3列を考えてみます。
この場合はPC5列なので「col」を「col-lg」に置き換えてあげます、そして「lg」より小さい画面の設定。上側2列は「col-6」、下側3列は「col-4」という具合です、HTMLはこんな感じ。
|
1 2 3 4 5 6 7 8 9 |
<div class="container"> <div class="row"> <div class="col-lg col-6">カラム①</div> <div class="col-lg col-6">カラム②</div> <div class="col-lg col-4">カラム③</div> <div class="col-lg col-4">カラム④</div> <div class="col-lg col-4">カラム⑤</div> </div> </div> |
デモ
簡単なデモページを作ってみました。
デモページのHTMLは次ページに記載しています、参考までに・・・。
デモページHTML
|
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<!-- コンテンツ --> <!-- 全て5カラム --> <div class="container"> <h2>全て5列</h2> <div class="row"> <div class="col"> <div class="aliceblue">カラム①</div> </div> <div class="col"> <div class="aliceblue">カラム②</div> </div> <div class="col"> <div class="aliceblue">カラム③</div> </div> <div class="col"> <div class="aliceblue">カラム④</div> </div> <div class="col"> <div class="aliceblue">カラム⑤</div> </div> </div> </div> <!-- 全て5カラム --> <!-- 5カラム PC5列 スマホ2列＋3列 --> <div class="container"> <div class="row"> <h2>PC5列 スマホ2列＋3列</h2> <div class="col-lg col-6"> <div class="aliceblue">カラム①</div> </div> <div class="col-lg col-6"> <div class="aliceblue">カラム②</div> </div> <div class="col-lg col-4"> <div class="aliceblue">カラム③</div> </div> <div class="col-lg col-4"> <div class="aliceblue">カラム④</div> </div> <div class="col-lg col-4"> <div class="aliceblue">カラム⑤</div> </div> </div> </div> <!-- /5カラム PC5列 スマホ2列＋3列 --> <!-- 5カラム PC5列 スマホ2列＋3列 --> <div class="container"> <div class="row"> <h2>PC5列 タブレット2列＋3列 スマホ縦並び</h2> <div class="col-lg col-md-6 col-12"> <div class="aliceblue">カラム①</div> </div> <div class="col-lg col-md-6 col-12"> <div class="aliceblue">カラム②</div> </div> <div class="col-lg col-md-4 col-12"> <div class="aliceblue">カラム③</div> </div> <div class="col-lg col-md-4 col-12"> <div class="aliceblue">カラム④</div> </div> <div class="col-lg col-md-4 col-12"> <div class="aliceblue">カラム⑤</div> </div> </div> </div> <!-- /5カラム PC5列 スマホ2列＋3列 --> <!-- 5カラム PC5列 スマホ2列＋3列 --> <div class="container"> <div class="row"> <h2>PC縦並び タブレット2列＋3列 スマホ5列</h2> <div class="col col-md-6 col-lg-12"> <div class="aliceblue">カラム①</div> </div> <div class="col col-md-6 col-lg-12"> <div class="aliceblue">カラム②</div> </div> <div class="col col-md-4 col-lg-12"> <div class="aliceblue">カラム③</div> </div> <div class="col col-md-4 col-lg-12"> <div class="aliceblue">カラム④</div> </div> <div class="col col-md-4 col-lg-12"> <div class="aliceblue">カラム⑤</div> </div> </div> </div> <!-- /5カラム PC5列 スマホ2列＋3列 --> <!-- /コンテンツ --> |
コメント