如何用Bootstrap使不同文本量盒子的底部按钮对齐并排？

嗨，这个问题我太熟悉啦！要让两个卡片底部的「read more」按钮对齐，用现代CSS布局就能轻松搞定，给你几个实用方案：

这是目前最常用的解决方案，核心思路是让卡片内部的元素自动分配空间，把按钮推到底部：

1. 给卡片的父容器设置Flex布局，让两个卡片并排且宽度一致：

.card-wrapper {
  display: flex;
  gap: 1.5rem; /* 调整卡片之间的间距 */
}

2. 给每个卡片设置垂直方向的Flex布局，并用justify-content: space-between让内容和按钮分别顶在顶部和底部：

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1; /* 让两个卡片平分可用宽度 */
  padding: 1rem;
  border: 1px solid #eee;
}

3. 可以给卡片内容区域加个底部间距，避免按钮和文本贴得太近：

.card-text {
  margin-bottom: 1rem;
}

如果喜欢Grid的写法，也可以用这个思路，通过margin-top: auto把按钮推到底部：

1. 父容器用Grid实现两列布局：

.card-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

2. 卡片内部不需要特殊布局，只需要给按钮设置自动上外边距：

.read-more-btn {
  margin-top: auto;
}

（注意：卡片需要是块级或Grid容器，这个margin才会生效，所以可以给.card加display: grid或者display: flex，不过Grid下直接用margin-top:auto就够了）

如果需要兼容IE这类老浏览器，可以用绝对定位的方式，但灵活性稍差：

1. 给卡片设置相对定位和最小高度：

.card {
  position: relative;
  min-height: 350px; /* 设一个足够容纳最长内容的最小高度 */
  padding: 1rem;
  border: 1px solid #eee;
}

2. 给按钮设置绝对定位，固定在卡片底部：

.read-more-btn {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}

个人最推荐前两种方案，Flexbox和Grid都能自适应内容高度，不用硬写固定值，维护起来更省心～

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