如何在页面缩放时保持Bootstrap卡片及内部字体尺寸稳定？

当前页面正常显示时，卡片及内部字体尺寸符合预期：

但放大页面后，卡片出现向下拉伸的问题：

相关代码如下：

<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">
  <div class="col-3">
    <div class="card">
      <div class="card-body d-flex justify-content-evenly">
        <div class="col-md-4 text-center">
          <h5 class="card-title">Reporting <br> Description Here </h5>
        </div>
        <div class="vr"></div>
        <div class="col-md-4 text-center" style="align-self: center;">
          <h5 class="card-title">200</h5>
        </div>
      </div>
    </div>
  </div>

  <div class="col-3">
    <div class="card">
      <div class="card-body d-flex justify-content-evenly">
        <div class="col-md-4 text-center">
          <h5 class="card-title">Reporting <br> Description Here </h5>
        </div>
        <div class="vr"></div>
        <div class="col-md-4 text-center" style="align-self: center;">
          <h5 class="card-title">200</h5>
        </div>
      </div>
    </div>
  </div>

  <div class="col-3">
    <div class="card">
      <div class="card-body d-flex justify-content-evenly">
        <div class="col-md-4 text-center">
          <h5 class="card-title">Reporting <br> Description Here </h5>
        </div>
        <div class="vr"></div>
        <div class="col-md-4 text-center" style="align-self: center;">
          <h5 class="card-title">200</h5>
        </div>
      </div>
    </div>
  </div>

  <div class="col-3">
    <div class="card">
      <div class="card-body d-flex justify-content-evenly">
        <div class="col-md-4 text-center">
          <h5 class="card-title">Reporting <br> Description Here </h5>
        </div>
        <div class="vr"></div>
        <div class="col-md-4 text-center" style="align-self: center;">
          <h5 class="card-title">200</h5>
        </div>
      </div>
    </div>
  </div>
</div>

卡片拉伸的核心原因是页面放大时，col-md-4在窄容器下（col-3宽度随页面变化），内部文本布局挤压导致高度被撑高。可通过以下方式解决：

• 固定卡片最小高度：给.card类添加固定最小高度，确保所有卡片高度统一，避免被内容撑开：

.card {
  min-height: 120px; /* 根据实际显示需求调整数值 */
}

• 优化内部列布局：将内部的col-md-4替换为无断点限制的col，同时添加flex-shrink: 0固定列宽，避免容器变窄时挤压文本：

<div class="card-body d-flex justify-content-evenly">
  <div class="col text-center flex-shrink-0">
    <h5 class="card-title">Reporting <br> Description Here </h5>
  </div>
  <div class="vr"></div>
  <div class="col text-center flex-shrink-0" style="align-self: center;">
    <h5 class="card-title">200</h5>
  </div>
</div>

• 利用Bootstrap原生等高布局：给外层.row添加row-cols-4 g-3（替代手动col-3），搭配align-items-stretch强制所有卡片高度一致：

<div class="row row-cols-4 g-3 align-items-stretch">
  <div class="col">
    <!-- 卡片内容 -->
  </div>
  <!-- 其余卡片结构保持不变 -->
</div>

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