引用テキストBootstrapのカードを横並びにしています。
現在、各カードの文章量によって高さがまちまちなのですが、
すべて同じ高さ(文章量の多いものの高さに揃える)ようにしたいです。
調べたところ、2つの方法を試したのですが、どちらも高さが統一されず、、
教えていただけますと大変助かります。
【その1】
参考サイト:https://qiita.com/chii/items/8e2d0d04d02f3fecebce
<html>
col-* クラスを指定している一つ上の要素に「row-eq-height」を追加
css
1<CSS> 2.row-eq-height { 3 display: flex; 4 flex-wrap: wrap; 5}
【その2】
<CSS>
.card_topicにmin-height:300px;と記載。
(300pxあれば足りそうだったので。)
私が書いているコードは下記の通りです。
html
1<div class="card-deck row row-eq-height"> 2 <div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;"> 3 4 <img src="images/Mug-Mockup.jpg" class="card-img-top img-fluid" alt="..."> 5 <div class="card-body"> 6 <h5 class="card-title">"あいう"</h5> 7 <p class="card-text">ららららら</p> 8 ×4 9 10 </div> 11</div> 12</div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。