Bootstrap 4.0卡片内按钮对齐问题求助

我看了你的代码和问题描述，问题出在自定义的.cont2容器上——你给包裹卡片图片和内容的外层cont2没有设置flex布局，导致card-body里的mt-auto无法正确将按钮推到卡片底部。

你只需要做两个小修改：

• 把包裹card-img-top和card-body的外层.cont2加上d-flex flex-column类（保留cont2和h-100，让它变成垂直方向的flex容器）
• 移除card标签上重复的card类（你写了<div class="card card h-100">，重复类会导致不必要的样式冲突）

修正后的完整代码如下：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.cont2 {
  overflow:hidden;
}
.cont2:hover .image2 {
  -webkit-transform:scale(1.2);
  transform:scale(1.2);
}
.image2 {
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
  -webkit-transform:scale(1);
  transform:scale(1);
}
</style>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-6 ">
      <div class="card h-100" style="width: 100%; border-width: 2px; border-color: darkgray; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius: 0">
        <div class="d-flex flex-column h-100 cont2">
          <div class="cont2 card-img-top">
            <img class="image2 card-img-top" src="http://via.placeholder.com/1365x768">
          </div>
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Second</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, quod, deserunt. Libero suscipit ipsam rerum!</p>
            <a href="more.html" class="btn btn-primary mt-auto btn-block homecardbutton " style="background-color:#8e44ad; border-width:0px">Read More</a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6">
      <div class="card h-100" style="width: 100%; border-width: 2px; border-color: darkgray; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
        <div class="d-flex flex-column h-100 cont2">
          <div class="cont2 card-img-top">
            <img class="image2 card-img-top" src="http://via.placeholder.com/1365x768">
          </div>
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">First card</h5>
            <p class="card-text">Lorem ipsum dolor adipisicing elit. Natus est iusto aperiam nesciunt, fugit asperiores a recusandae, cum officiis optio repellat quos. Doloremque deleniti ducimus id reiciendis explicabo vel eum.</p>
            <a href="moremore.html" class="btn btn-primary mt-auto btn-block" style="background-color:#8e44ad; border-width:0px">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

为什么这样修改？ #

Bootstrap的mt-auto需要在flex容器中才能生效，它会自动占据容器内的剩余空间，把元素推到底部。之前你的外层cont2只是设置了h-100但不是flex容器，card-body无法充分利用卡片的整体高度，按钮自然无法对齐。改成d-flex flex-column h-100后，整个卡片内容区域变成垂直方向的flex容器：card-img-top会占据自身高度，剩下的空间全部留给card-body，再配合card-body内部的d-flex flex-column和mt-auto，按钮就会精准对齐到卡片底部了。

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