在卡片引导程序中保持相同的内容高度答案

【问题标题】：Keep the same height in content within a card bootstrap在卡片引导程序中保持相同的内容高度
【发布时间】：2021-11-29 07:20:36
【问题描述】：

我有两张 Bootstrap 卡，我想保持相同的高度，但是里面的描述 .card-body

<div class="col-md-6">
    <div class="card">
        <img class="card-img-top" data-src="holder.js/100px180/" >
        <div class="card-body">
            <p class="card-text">Cost $100</p>
            <p class="card-text">Description: Beautiful item Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus </p>
            <button class="btn btn-danger">Buy</button>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card">
          <img class="card-img-top" data-src="holder.js/100px180/" >
          <div class="card-body">
              <p class="card-text">Cost $100</p>
              <p class="card-text">Description: Beautiful item Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus aspernatur sed alias reiciendis deleniti amet doloribus, adipisci aut, veniam asperiores ipsam nemo vel eius. Tenetur a eius vel impedit officia?</p>
            <button class="btn btn-danger">Buy</button>
        </div>
    </div>
</div>

正在向下推我的.card 的边框，我在描述中添加了一些额外的填充，但它一直在向下推我所有的内容。如何在卡片中保持相同的高度以使卡片内容也保持相同的高度？

我也尝试添加.d-flex .align-items-stretch，但.card-body 中的内容未对齐

https://codepen.io/motorocool/pen/BadaWee

编辑：我希望得到同样的结果。 https://imgur.com/a/Cj9vw6Q

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

<div class="card h-100"> 在每张卡上或用css：

card {
height:100%;
}

如果你想让卡片中的内容更加一致，可以查看我在jsfiddle中是如何做到的

https://codepen.io/todor-markov/pen/jOLOLgP

【讨论】：