如何让Bootstrap卡片等高且.card-body内部内容高度统一对齐

你只需要通过Bootstrap自带的弹性布局工具类修改原有代码即可，无需额外编写复杂CSS，修改步骤如下：

• 给两个.col-md-6的父容器（row元素）保留原有布局类即可，列本身不需要额外修改
• 给每个.card添加h-100类，让卡片撑满所在列的全部高度，实现卡片等高
• 给每个.card-body添加d-flex flex-column类，将内容区域设置为垂直弹性盒布局
• 给描述内容对应的.card-text标签添加flex-grow-1类，让描述区域自动填充剩余垂直空间，将底部按钮推到卡片底部对齐

修改后的完整代码如下：

<div class="row">
  <div class="col-md-6">
    <div class="card h-100">
      <img class="card-img-top" data-src="holder.js/100px180/" >
      <div class="card-body d-flex flex-column">
        <p class="card-text">Cost $100</p>
        <p class="card-text flex-grow-1">Description: Beautiful item Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus </p>
        <button class="btn btn-danger mt-auto">Buy</button>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card h-100">
      <img class="card-img-top" data-src="holder.js/100px180/" >
      <div class="card-body d-flex flex-column">
        <p class="card-text">Cost $100</p>
        <p class="card-text flex-grow-1">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 mt-auto">Buy</button>
      </div>
    </div>
  </div>
</div>

如果使用的是Bootstrap 4版本，没有内置flex-grow-1工具类，可以自行添加一行自定义CSS即可：

.flex-grow-1 {
  flex-grow: 1;
}

修改后两个卡片会自动保持等高，价格、描述区域、购买按钮的位置都会全局对齐，不会出现内容错位或整体下移的问题。

内容的提问来源于stack exchange，提问作者Juan Topo