使用 bootstrap 5 的 flexbox 工具类（如 `d-flex flex-column` 和 `mt-auto`），可轻松实现按钮在固定高度容器内的底部对齐，无需额外 css 或 javascript。
在 Bootstrap 5 中，传统的 vertical-align 属性对块级元素无效，而 align-items: flex-end 等方式又受限于父容器的 Flex 方向。最简洁、语义清晰且响应式友好的方案是：将容器设为垂直方向的 Flex 容器（d-flex flex-column），再给按钮所在子容器添加 mt-auto（自动上边距）。
该技巧利用了 Flex 布局中 auto 边距的“推挤”特性：当一个 Flex 子项设置 margin-top: auto 时，浏览器会将其尽可能向下推，直至紧贴容器底部（前提是父容器为 flex-direction: column）。
✅ 正确实现步骤如下：
-
为 .drop-shadow-box 添加 d-flex flex-column
将其设为垂直主轴的 Flex 容器，确保子元素按列堆叠； -
将按钮包裹在独立的 <div> 中，并添加 mt-auto text-center
mt-auto 实现垂直底部吸附，text-center 保持水平居中； -
确保内容区与按钮区分离为两个兄弟节点
即 <div class="tpr-text-block">...</div> 和 <div class="text-center mt-auto">...</div> 同级，避免嵌套干扰。
以下是关键 HTML 结构示例（已适配原代码）：
<div class="drop-shadow-box d-flex flex-column">
<div class="tpr-text-block">
<h1 class="course-title">Course One Test Prep</h1>
<h3>Course One Test Prep</h3>
<p>Gives you unlimited access to our Course One Courses...</p>
</div>
<div class="text-center mt-auto">
<a class="btn btn-primary btn-lg" href="#">FREE</a>
</div>
</div>⚠️ 注意事项：
- 不要遗漏 d-flex flex-column —— 若仅加 mt-auto 而父容器非 Flex，则无效；
- 避免给 .drop-shadow-box 设置 height: 100% 且无明确高度上下文（如父容器未设高），否则可能导致高度塌陷；如需等高卡片，建议配合 h-100 或 CSS Grid；
- 若需兼容多行文本动态高度，此方案依然健壮——Flex 自动分配剩余空间，按钮始终锚定底部；
- 如需在小屏幕堆叠时保持一致行为，请确认 courses-container 及其父 .row 未意外触发 flex-wrap: wrap 干扰布局（当前代码中无需额外处理）。
总结：d-flex flex-column + mt-auto 是 Bootstrap 5 中实现「底部锚定」的标准范式，语义明确、代码精简、兼容性好，应作为首选方案替代各类 hack 写法（如绝对定位、line-height 技巧或 JS 计算）。
