Bootstrap 4 多列布局下如何将按钮行垂直对齐至列容器底部

• Bootstrap 4的col类默认仅作为网格布局的块级占位元素，本身不是弹性容器
• 你此前尝试加的align-self-end属于弹性子元素属性，因为列容器没有开启弹性布局，该属性完全不会生效，自然无法将按钮行推到列底部
• 虽然外层row是弹性布局、已经实现了所有列被最高的第一列撑为等高，但列内部的元素仍遵循普通块流排列，不会自动贴附容器底部

全程使用Bootstrap 4自带工具类实现，不需要编写额外自定义布局CSS：

1. 给三个套餐对应的列容器（带package类的col元素）添加d-flex flex-column类：
   将列的类名从原有形式：

   <div class="col-lg-3 col-md-6 m-4 p-2 package package-1">
   

   修改为：

   <div class="col-lg-3 col-md-6 m-4 p-2 package package-1 d-flex flex-column">
   

   作用是将单个套餐列设置为纵向排列的弹性盒容器，让内部元素支持弹性布局规则。
2. 给每个列内部包裹按钮组的行容器添加mt-auto类：
   将按钮行的类名从原有形式：

   <div class="row">
   

   修改为：

   <div class="row mt-auto">
   

   原理是在纵向弹性盒布局中，mt-auto会自动占据当前元素和上方内容之间的所有剩余空间，直接将按钮行推到列容器的最底端。

• 保留外层row的等高特性，三个列高度始终由内容最多的第一列撑满
• 三个列内部的标题、描述文本、特性列表正常从上到下排布，剩余空白空间被mt-auto全部填充，三个按钮组会被推到完全相同的垂直位置，实现水平对齐的要求
• 所有自定义类仅保留原有文本、配色逻辑，不会和布局类产生冲突

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