如何将链接对齐到网格列的底部?

Question

我有一个网页，显示使用bootstrap 5网格的项目列表。网格中的每一列包含一个项目，每个项目都有一个Edit链接。我希望编辑链接被定位在列的底部。我试过align-bottom和bottom-0。但它们都不起作用。在下面的示例中，您应该看到第二列上的Edit链接不在该列的底部。我做错了什么?(我也试过position-absolute)

https://jsfiddle.net/hockchailim/5mgfkoLc/2/

<div class="container">
<div class="row">
<div class="col p-3 rounded border text-center">
<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="align-bottom">Edit</a>
</div>
<div class="col p-3 rounded border text-center">
<div class="fw-bolder">
Item 2
</div>
<div>
Desc Line 1
</div>
<a href="http://localhost:8000/products/2/edit" class="align-bottom">Edit</a>
</div>
</div>
</div>

Answer 1

你可以使用responsive flexbox:

<div class="container">
<div class="row">
<div class="col p-3 rounded border text-center">
<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="align-bottom">Edit</a>
</div>
<div class="col p-3 rounded border text-center d-flex flex-column justify-content-between">
<div class="fw-bolder">
Item 2
</div>
<div>
Desc Line 1
</div>
<a href="http://localhost:8000/products/2/edit" class="align-text-bottom">Edit</a>
</div>
</div>
</div>

使用d-flex类转换为伸缩项目，使用flex-column定义项目的方向，您只需要使用justify-content-between类将项目垂直对齐并沿主轴均匀分布在容器内