Bootstrap 5 卡片 如何使卡片内的字段高度相同，而不管内容如何？

问：

在图-1 图-1中， 我想让这个棕色（{x.title}）内容保持相同的高度，蓝色（{x.description}）和绿色（{x.description2}）内容也保持相同的高度，无论里面的内容大小如何，它们都以相同的高度对齐卡片（图-1）我正在使用引导程序5。

function CardResponsive() {
 
  return (
  <div className="container">
    <div className="scroll mt-4">
      <div className="row row-cols-1 row-cols-md-3 g-4">
        
        {a.map((x) => {
          return (
            <div key={x.id} className="col">
              <div className="card h-100">
                <img src={x.screenShot} className="card-img-top" alt="..."/>
                <div className="card-body">
                  <h5 className="card-title">{x.title}</h5>
                  <p className="card-text a">{x.description}</p>
                  <p className="card-text b">{x.description2}</p>
                </div>
                <div className="card-footer">
                  <small className="text-body-secondary">Last updated 3 mins ago</small>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  </div>
  )
}
 
export default CardResponsive

只有当我在 CSS 中将高度设置为固定值时，我才能这样做，但那样它就不会响应（图 2）：图 2

.card-title {
  background-color: #C09578;
  height: 80px;
}
.a {
  background-color: cadetblue;
  height: 130px;
}
.b {
  background-color: rgb(135, 202, 141);
  height: 275px;
}

我正在尝试使卡片中的内容具有相同的高度，无论内容的大小如何，但要以响应方式进行。