Q&A
現状起きていること、問題点は何でしょう。
bootstrapを用いて、画像のような表示をしたいです。
A列B列C列、列単位でcardを表示させるようなイメージです。
また、B列のみ1行目は1カラム、2行目は2カラム、3行目は1カラムのような形で交互で表示させたいと考えてます。
B列の1カラムと2カラムの表示がなかなかできず、お手数ではございますが、教えていただけますと大変助かります。
html
1<!-- A列 --> 2<div class="d-flex flex-column"> 3 <div class="card" style="width: 18rem;"> 4 <div class="card-body"> 5 <h5 class="card-title">Special title treatment</h5> 6 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 7 <a href="#" class="btn btn-primary">Go somewhere</a> 8 </div> 9 </div> 10 11 <div class="card text-center" style="width: 18rem;"> 12 <div class="card-body"> 13 <h5 class="card-title">Special title treatment</h5> 14 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 15 <a href="#" class="btn btn-primary">Go somewhere</a> 16 </div> 17 </div> 18 19 <div class="card text-right" style="width: 18rem;"> 20 <div class="card-body"> 21 <h5 class="card-title">Special title treatment</h5> 22 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 23 <a href="#" class="btn btn-primary">Go somewhere</a> 24 </div> 25 </div> 26</div> 27 28<!-- B列 --> 29<div class="d-flex flex-column"> 30 <div class="card" style="width: 18rem;"> 31 <div class="card-body"> 32 <h5 class="card-title">Special title treatment</h5> 33 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 34 <a href="#" class="btn btn-primary">Go somewhere</a> 35 </div> 36 </div> 37 38 <div class="card text-center" style="width: 18rem;"> 39 <div class="card-body"> 40 <h5 class="card-title">Special title treatment</h5> 41 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 42 <a href="#" class="btn btn-primary">Go somewhere</a> 43 </div> 44 </div> 45 46 <div class="card text-right" style="width: 18rem;"> 47 <div class="card-body"> 48 <h5 class="card-title">Special title treatment</h5> 49 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 50 <a href="#" class="btn btn-primary">Go somewhere</a> 51 </div> 52 </div> 53</div> 54 55<!-- C列 --> 56<div class="d-flex flex-column"> 57 <div class="card" style="width: 18rem;"> 58 <div class="card-body"> 59 <h5 class="card-title">Special title treatment</h5> 60 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 61 <a href="#" class="btn btn-primary">Go somewhere</a> 62 </div> 63 </div> 64 65 <div class="card text-center" style="width: 18rem;"> 66 <div class="card-body"> 67 <h5 class="card-title">Special title treatment</h5> 68 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 69 <a href="#" class="btn btn-primary">Go somewhere</a> 70 </div> 71 </div> 72 73 <div class="card text-right" style="width: 18rem;"> 74 <div class="card-body"> 75 <h5 class="card-title">Special title treatment</h5> 76 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 77 <a href="#" class="btn btn-primary">Go somewhere</a> 78 </div> 79 </div> 80</div>
説明不足ですみません。
質問に貼っている画像のB列のような表示のさせ方ができないことです。
他に足りない情報などあれば教えてください。
4でしょうか？
また、ご提示の図ですとB列は4つのカードが合ってよさそうに思うのですが、ご提示のコードには3つしかないようでした。
ありがとうございます。
4つ並べるということをしてみたのですが、2行目のみを横並びで2つ表示させる方法が分からず、断念いたしました。。
ということは、3つでいいということでかまいませんか？
はい、大丈夫です。
3つか4つかによって実装が変わってくるのでしょうか？
3つだと3行目B列が空白になりますよね？
各行はそろっていた方がいいのでしょうか？
それですと、Bootstrap のグリッドシステムでは難しいのですが、Bootstrap の範囲がよろしいでしょうか？
また、こちらのバージョンは4でいいのでしょうか？
空白になります。
3行目の空白になる場所には、1行目と全く同じ要領で当てはめていくと認識だったのですが、認識違いますでしょうか？
できれば揃っているのが望ましいです。
できればBootstrapで実装したいと思っていましたが、難しい場合、他の手段でも大丈夫でございます。
Bootstrapのバージョンは4です。
長々とやりとりありがとうございますm(._.)m
回答1件
0
ベストアンサー
「B列の3行目が空白になってよく、かつ各行がそろっていなくてもよい」という条件でしたら、以下のような感じでしょうか。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/8aLxbhdv/
html
1 <div class="row align-items-start"> 2 3 <!-- A列 --> 4 <div class="col-4 row"> 5 <div class="card col-12"> 6 <div class="card-body"> 7 <h5 class="card-title">Special title treatment</h5> 8 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 9 <a href="#" class="btn btn-primary">Go somewhere</a> 10 </div> 11 </div> 12 13 <div class="card text-center col-12"> 14 <div class="card-body"> 15 <h5 class="card-title">Special title treatment</h5> 16 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 17 <a href="#" class="btn btn-primary">Go somewhere</a> 18 </div> 19 </div> 20 21 <div class="card text-right col-12"> 22 <div class="card-body"> 23 <h5 class="card-title">Special title treatment</h5> 24 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 25 <a href="#" class="btn btn-primary">Go somewhere</a> 26 </div> 27 </div> 28 </div> 29 30 <!-- B列 --> 31 <div class="col-4 row"> 32 <div class="card col-12"> 33 <div class="card-body"> 34 <h5 class="card-title">Special title treatment</h5> 35 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 36 <a href="#" class="btn btn-primary">Go somewhere</a> 37 </div> 38 </div> 39 40 <div class="card text-center col-6"> 41 <div class="card-body"> 42 <h5 class="card-title">Special title treatment</h5> 43 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 44 <a href="#" class="btn btn-primary">Go somewhere</a> 45 </div> 46 </div> 47 48 <div class="card text-right col-6"> 49 <div class="card-body"> 50 <h5 class="card-title">Special title treatment</h5> 51 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 52 <a href="#" class="btn btn-primary">Go somewhere</a> 53 </div> 54 </div> 55 </div> 56 57 <!-- C列 --> 58 <div class="col-4 row"> 59 <div class="card col-12"> 60 <div class="card-body"> 61 <h5 class="card-title">Special title treatment</h5> 62 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 63 <a href="#" class="btn btn-primary">Go somewhere</a> 64 </div> 65 </div> 66 67 <div class="card text-center col-12"> 68 <div class="card-body"> 69 <h5 class="card-title">Special title treatment</h5> 70 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 71 <a href="#" class="btn btn-primary">Go somewhere</a> 72 </div> 73 </div> 74 75 <div class="card text-right col-12"> 76 <div class="card-body"> 77 <h5 class="card-title">Special title treatment</h5> 78 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 79 <a href="#" class="btn btn-primary">Go somewhere</a> 80 </div> 81 </div> 82 </div> 83 84 </div>
行の高さを揃えるには、グリッドレイアウトなどが必要かと思いますが、その場合は垂直方向の順序でアイテムを入れ込むのはかなり面倒です。
投稿2021/12/07 10:14
総合スコア37634
あなたの回答
tips
プレビュー
