BootstrapのCardの高さを揃えたいです。
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
Bootstrapのカードを横並びにしています。
現在、各カードの文章量によって高さがまちまちなのですが、
すべて同じ高さ（文章量の多いものの高さに揃える）ようにしたいです。
調べたところ、２つの方法を試したのですが、どちらも高さが統一されず質問させていただきました。
（１）
＜html＞
col-* クラスを指定している一つ上の要素に「row-eq-height」を追加
＜CSS＞
.row-eq-height {
display: flex;
flex-wrap: wrap;
}
参考サイト：https://qiita.com/chii/items/8e2d0d04d02f3fecebce
（２）
＜CSS＞
.cardタグにmin-height:300px;と記載。
（300pxあれば足りそうだったので。）
私が書いているコードは下記の通りです。
【html】
<div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;">
<img src="images/Mug-Mockup.jpg" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">"あいう"</h5>
<p class="card-text">ららららら</p>
</div>
</div>
現在、各カードの文章量によって高さがまちまちなのですが、
すべて同じ高さ（文章量の多いものの高さに揃える）ようにしたいです。
調べたところ、２つの方法を試したのですが、どちらも高さが統一されず質問させていただきました。
（１）
＜html＞
col-* クラスを指定している一つ上の要素に「row-eq-height」を追加
＜CSS＞
.row-eq-height {
display: flex;
flex-wrap: wrap;
}
参考サイト：https://qiita.com/chii/items/8e2d0d04d02f3fecebce
（２）
＜CSS＞
.cardタグにmin-height:300px;と記載。
（300pxあれば足りそうだったので。）
私が書いているコードは下記の通りです。
【html】
<div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;">
<img src="images/Mug-Mockup.jpg" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">"あいう"</h5>
<p class="card-text">ららららら</p>
</div>
</div>
お茶太郎 さん
07月20日 23時25分
お茶太郎さん、こんにちは。
Bootstrap4系では、.rowに
display: flex;
flex-wrap: wrap;
が最初からついており、何もせずともご希望の表示になると思いますので、Bootstrap3系をお使いでしょうか？
Bootstrap3系でも、（１）（2）のいずれの方法でも問題無いようです。
※（2）は300pxに収まる場合のみ。
（1）の方が汎用性が高いので、そちらのソースを上げます。
検証用に最初のcardだけ文字を多くしてみました。
ご提示いただいたコードを基に、以下を行っただけです。
・シンプルなHTMLファイルにBootstrapを読み込ませる。
・CSSを定義する（.cardに色を付けたのは分りやすくするため）
・<div class=".row row-eq-height"></div>内にご提示のコードを入れる（検証に不要な画像は削除）。
・<div class="card ～"></div> を増やす（1つだと検証できないため）。
具体的にこちらでもほぼそのまま検証できるHTML/CSSコード（個人情報に繋がる部分のみ置き換えたもの）をご提示いただければ、また違った回答ができるかもしれません。
後は余談ですが、HTML内のテキスト中では"（ダブルクォート）は"とエスケープします。
また、全角スペースがコード中のインデントに使われているようです。今回のご投稿用に手打ちで調整されたのでしたら良いですが、そうで無い場合は半角スペースまたはタブに置き換えが必要です。
（投稿時にコードとしてくくっていただければ、半角スペースなどでもインデントが適用されます。）
Bootstrap4系では、.rowに
display: flex;
flex-wrap: wrap;
が最初からついており、何もせずともご希望の表示になると思いますので、Bootstrap3系をお使いでしょうか？
Bootstrap3系でも、（１）（2）のいずれの方法でも問題無いようです。
※（2）は300pxに収まる場合のみ。
（1）の方が汎用性が高いので、そちらのソースを上げます。
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.row-eq-height {
display: flex;
flex-wrap: wrap;
}
.card {
background-color: #eee;
/* min-height: 300px; */
}
</style>
</head>
<body>
<div class="row row-eq-height">
<div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">"あいう"</h5>
<p class="card-text">ららららら</p>
<p class="card-text">ららららら</p>
<p class="card-text">ららららら</p>
<p class="card-text">ららららら</p>
</div>
</div>
<div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">"あいう"</h5>
<p class="card-text">ららららら</p>
</div>
</div>
<div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">"あいう"</h5>
<p class="card-text">ららららら</p>
</div>
</div>
<div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">"あいう"</h5>
<p class="card-text">ららららら</p>
</div>
</div>
<div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">"あいう"</h5>
<p class="card-text">ららららら</p>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>title</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.row-eq-height {
display: flex;
flex-wrap: wrap;
}
.card {
background-color: #eee;
/* min-height: 300px; */
}
</style>
</head>
<body>
<div class="row row-eq-height">
<div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">"あいう"</h5>
<p class="card-text">ららららら</p>
<p class="card-text">ららららら</p>
<p class="card-text">ららららら</p>
<p class="card-text">ららららら</p>
</div>
</div>
<div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">"あいう"</h5>
<p class="card-text">ららららら</p>
</div>
</div>
<div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">"あいう"</h5>
<p class="card-text">ららららら</p>
</div>
</div>
<div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">"あいう"</h5>
<p class="card-text">ららららら</p>
</div>
</div>
<div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">"あいう"</h5>
<p class="card-text">ららららら</p>
</div>
</div>
</div>
</body>
</html>
検証用に最初のcardだけ文字を多くしてみました。
ご提示いただいたコードを基に、以下を行っただけです。
・シンプルなHTMLファイルにBootstrapを読み込ませる。
・CSSを定義する（.cardに色を付けたのは分りやすくするため）
・<div class=".row row-eq-height"></div>内にご提示のコードを入れる（検証に不要な画像は削除）。
・<div class="card ～"></div> を増やす（1つだと検証できないため）。
具体的にこちらでもほぼそのまま検証できるHTML/CSSコード（個人情報に繋がる部分のみ置き換えたもの）をご提示いただければ、また違った回答ができるかもしれません。
後は余談ですが、HTML内のテキスト中では"（ダブルクォート）は"とエスケープします。
また、全角スペースがコード中のインデントに使われているようです。今回のご投稿用に手打ちで調整されたのでしたら良いですが、そうで無い場合は半角スペースまたはタブに置き換えが必要です。
（投稿時にコードとしてくくっていただければ、半角スペースなどでもインデントが適用されます。）
馬場誠 さん
07月21日 07時48分
