如何在Bootstrap5栅格列中实现链接底部对齐？

你之前尝试的类没有生效，核心是对Bootstrap工具类的生效前提、栅格布局的默认特性不熟悉：

• align-bottom 仅对行内/行内块元素在当前文本行内的垂直对齐生效，无法将元素推到列容器的底部，在你的场景下完全不匹配作用场景。
• bottom-0 是定位偏移属性，必须配合非static定位（比如position-relative/position-absolute）才会生效，单独添加没有任何效果。
• 单独加position-absolute不生效，是因为你没有给父级.col元素设置position: relative作为定位上下文，且绝对定位会让元素脱离正常文档流，容易和列内其他内容重叠，不是最优实现方案。

Bootstrap 5 自带完整的Flex布局工具类，不需要写自定义CSS就能实现，核心逻辑是把每一列转为垂直方向的Flex容器，通过自动边距把Edit链接推到列底部：

1. 给每个.col元素添加d-flex flex-column类，让列本身成为垂直排列的Flex容器（Bootstrap栅格的列默认是Flex项，本身支持等高特性，转为Flex容器后内部布局更可控）
2. 给列内的Edit链接添加mt-auto类，Flex布局下垂直方向的margin-top: auto会自动占满链接上方的剩余空间，把链接固定到列的最底部，不会出现内容遮挡问题。

修正后的完整代码如下：

<div class="container">
    <div class="row">
        <div class="col p-3 rounded border text-center d-flex flex-column">
            <div class="fw-bolder">
                Item 1
            </div>
            <div>
                Desc Line 1
            </div>
            <div>
                Desc Line 2
            </div>
            <div>
                Desc Line 3
            </div>
            <a href="http://localhost:8000/products/1/edit" class="mt-auto">Edit</a>
        </div>
        <div class="col p-3 rounded border text-center d-flex flex-column">
            <div class="fw-bolder">
                Item 2
            </div>
            <div>
                Desc Line 1
            </div>

            <a href="http://localhost:8000/products/2/edit" class="mt-auto">Edit</a>
        </div>
    </div>
</div>

补充：如果一定要用绝对定位实现，需要给.col添加position-relative，给Edit链接添加position-absolute bottom-0 start-50 translate-middle-x，但这种方式需要手动给列底部加足够的内边距避免内容被链接遮挡，不推荐优先使用。

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