使用 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）。

✅ 正确实现步骤如下：

1. 为 .drop-shadow-box 添加 d-flex flex-column
   将其设为垂直主轴的 Flex 容器，确保子元素按列堆叠；
2. 将按钮包裹在独立的
   中，并添加 mt-auto text-center
   mt-auto 实现垂直底部吸附，text-center 保持水平居中；

3. 确保内容区与按钮区分离为两个兄弟节点
   即
   …

   和

   …

   同级，避免嵌套干扰。

以下是关键 html 结构示例（已适配原代码）：

   
     
Course One Test Prep
     
Course One Test Prep
     
Gives you unlimited access to our Course One Courses...
   
   
     FREE   
 

⚠️ 注意事项：

• 不要遗漏 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 计算）。