Bootstrap中无需指定高度实现网格对齐及箭头按钮垂直对齐问题

要实现箭头在所有网格卡片的底部对齐，无需指定固定高度，只需利用Bootstrap的flex布局属性调整卡片结构：

1. 将卡片容器设为垂直flex布局：给外层的卡片div添加d-flex flex-column类，让内部元素按垂直方向排列。
2. 让内容区域占满剩余空间：给包含图片、标题和描述的div添加flex-grow-1，这样它会自动填充卡片中除箭头外的所有可用空间，把箭头挤到底部。
3. 微调链接容器的布局：确保链接区域填满整个卡片，避免点击范围异常。

修改后的核心代码如下：

<div className="m-2 p-0 shadow-lg rounded-2 pe-auto border border-primary d-flex flex-column" style={{ width: "100%", maxWidth: "200px" }} key={data.key} >
  <a href="/" className="d-flex flex-column h-100">
    <div className="p-2 d-flex flex-xl-column align-items-center align-items-xl-start flex-grow-1">
      <img className="mr-1" style={{ height: 50, width: 50 }} src={data.img} alt="" />
      <div>
        <h3 className="wow fadeInUp">{data.name}</h3>
        <p className="fs-6 mt-2">{data.describe}</p>
      </div>
    </div>
    <div className="d-flex justify-content-end">
      <img style={{width: 30,height: 30,objectFit: "contain",borderBottomRightRadius: 8}} src={require("./components/Images/arrow-right.png")} alt="" />
    </div>
  </a>
</div>

关键修改说明： #

• 外层卡片div添加d-flex flex-column，构建垂直flex容器，让内部元素按垂直方向分配空间。
• 内容div添加flex-grow-1，使其占据卡片内除箭头外的所有剩余空间，强制箭头定位到底部。
• <a>标签添加d-flex flex-column h-100，确保链接区域填满整个卡片，保证点击范围覆盖完整卡片。

这样所有卡片会自动拉伸至统一高度，箭头也会对齐在底部，无需手动设置固定高度。

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