Bootstrap 5.3中列边框无法铺满高度该如何解决？

问题出在align-items-center让列仅根据内容高度渲染，导致边框无法撑满整行高度。不用Card组件的话，可以通过以下调整实现需求：

1. 移除.row上的align-items-center类（Bootstrap默认会让列拉伸至行的全高）
2. 给每个列（.col-*元素）添加d-flex flex-column justify-content-center类，让列内部内容垂直居中

修改后的代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="row border-top border-bottom border-dark-subtle fs-5 text-center text-secondary">
  <div class="col-12 col-md-4 p-5 d-flex flex-column justify-content-center">
    <img src="https://via.placeholder.com/200x50" class="mb-3" width="200">
    <p>Looking to replicate the media object component from Bootstrap 4? Recreate it in no time with a few flex</p>
  </div>
  <div class="col-12 col-md-4 p-5 border-start border-end border-dark-subtle d-flex flex-column justify-content-center">
    <span class="d-block display-3 text-light fw-bold">5G</span>
    <p>This is some content from a media component. </p>
  </div>
  <div class="col-12 col-md-4 p-5 d-flex flex-column justify-content-center">
    <span class="d-block">Up to</span>
    <span class="d-block text-success display-3 fw-bold">95%</span>
    <p>Network coverage</p>
  </div>
</div>

原理说明：

• 移除align-items-center后，列会自动拉伸至行的完整高度，边框自然撑满上下
• 每个列转为flex垂直容器，通过justify-content-center让内部内容保持垂直居中

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