如何使用Bootstrap 5将按钮垂直对齐到容器底部？

我使用Bootstrap 5构建了两个课程展示卡片，右侧卡片因内容较多高度更高，左侧卡片的按钮始终无法对齐到盒子底部，尝试过多种Bootstrap工具类、调整高度和显示方式均无效。

原HTML代码 #

<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
    <div class="courses">
      <h2 class="d-flex justify-content-center text-center">Our Courses</h2>
      <div class="container">
        <div class="row">
          <div class="col-md-6 courses-container">
            <div class="drop-shadow-box">
              <span class="tpr-text-block">
                <h1 id="free-course-one-training" class="course-title">Course One Test Prep</h1>
                <h3 id="free-course-test-prep">Course One Test Prep</h3>
                <p>
                  Gives you unlimited access to our Course One Courses to help you get your certificate. Our courses cover everything you need to pass your written Cert Tests.
                </p>
              </span>
              <div class="">
                <div class="course-button-container text-center">
                  <a class="btn btn-primary btn-lg" href="#">FREE</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 courses-container">
            <div class="drop-shadow-box">
              <span class="tpr-text-block" >
                <h1 id="class-a-training" class="course-title">Course A Full Certificate</h1>
                <h3 id="class-a-eldt-certificate-plus-free-permit-test-prep">Course A Full Certificate + <br>Course One Test Prep</h3>
                <p>
                  Gives you unlimited access to all <span class="bold">REQUIRED THEORY</span> courses to get a Course A Full Certificate. Also includes unlimited access to our Course One Test Prep Courses to help you get your Cert. You will still need to go to a Cert School to do the Lab training.
                </p>
                <div class="text-center"><a class="btn btn-primary btn-lg" href="#">FREE</a></div>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

原CSS代码 #

.courses {
  background-color: #ebf3fa;
  padding-top: 1.3rem;
  padding-bottom: 1.3rem;
}
.courses h2 {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 1.3rem;
}
.courses .drop-shadow-box {
  background-color: #fff;
  height: 100%;
  box-shadow: #ced7e0 5px 5px 15px 15px;
  padding: 2rem;
  margin: 0px 20px;
}
.courses-container {
  margin-bottom: 2rem;
}
.course-title {
  background-color: #0d314b;
  color:#fff;
  text-align:center;
}

利用Bootstrap的flex布局工具类即可快速实现按钮垂直对齐到底部，无需复杂自定义样式：

1. 调整左侧卡片结构 #

将左侧卡片的内容区和按钮区放入垂直flex容器，让内容区填充剩余空间，按钮自动靠底：

<div class="col-md-6 courses-container">
  <div class="drop-shadow-box d-flex flex-column h-100">
    <span class="tpr-text-block flex-grow-1">
      <h1 id="free-course-one-training" class="course-title">Course One Test Prep</h1>
      <h3 id="free-course-test-prep">Course One Test Prep</h3>
      <p>
        Gives you unlimited access to our Course One Courses to help you get your certificate. Our courses cover everything you need to pass your written Cert Tests.
      </p>
    </span>
    <div class="course-button-container text-center mt-auto">
      <a class="btn btn-primary btn-lg" href="#">FREE</a>
    </div>
  </div>
</div>

2. 统一右侧卡片结构 #

为保持布局一致性，将右侧卡片的按钮移出文本块，同样放入flex容器：

<div class="col-md-6 courses-container">
  <div class="drop-shadow-box d-flex flex-column h-100">
    <span class="tpr-text-block flex-grow-1">
      <h1 id="class-a-training" class="course-title">Course A Full Certificate</h1>
      <h3 id="class-a-eldt-certificate-plus-free-permit-test-prep">Course A Full Certificate + <br>Course One Test Prep</h3>
      <p>
        Gives you unlimited access to all <span class="bold">REQUIRED THEORY</span> courses to get a Course A Full Certificate. Also includes unlimited access to our Course One Test Prep Courses to help you get your Cert. You will still need to go to a Cert School to do the Lab training.
      </p>
    </span>
    <div class="text-center mt-auto">
      <a class="btn btn-primary btn-lg" href="#">FREE</a>
    </div>
  </div>
</div>

3. 优化CSS（可选） #

移除drop-shadow-box中的height:100%，因为Bootstrap的h-100工具类已实现相同效果：

.courses .drop-shadow-box {
  background-color: #fff;
  /* height: 100%; 移除此行 */
  box-shadow: #ced7e0 5px 5px 15px 15px;
  padding: 2rem;
  margin: 0px 20px;
}

核心原理 #

• d-flex flex-column：将卡片容器设置为垂直方向的flex布局
• h-100：确保卡片高度继承父列的100%高度，与右侧等高
• flex-grow-1：让文本内容区自动填充容器剩余空间，挤压按钮到底部
• mt-auto：给按钮容器设置自动上边距，在flex布局中会自动对齐到容器底部

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