Bootstrap如何让列内卡片撑满行高且不丢失底部外边距

Bootstrap的.row是flex容器，子列默认会被拉伸为等高状态。直接给卡片加.h-100（对应样式height: 100%）时，卡片高度会完全等于父列的总高度，卡片本身设置的margin-bottom: 1.5rem属于盒模型外的间距，会直接溢出列容器，视觉上就表现为底部外边距丢失，和下方内容的间距错乱。

不需要写额外hack样式，用Bootstrap原生的flex工具类就能实现，只需要两步：

• 给每个承载卡片的列元素（即当前的.col-md-6）添加.d-flex类，将列本身转为flex容器
• 移除卡片上之前加的.h-100类，替换为.flex-grow-1类

实现逻辑：flex容器内设置了flex-grow: 1的子元素，会自动拉伸占满容器内的剩余可用空间，不会把外侧margin算入拉伸高度，因此卡片原有的底部外边距可以正常生效，不会被挤压或溢出。

<style>
.card {
  position: relative;
  margin-bottom: 1.5rem;
  width: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-md-6 d-flex">
    <div class="card flex-grow-1">
      <div class="card-body">
        <div class="row">
          <div class="personal-information mt-30">
            <div class="name-text">
              <h6 class="font-14"><span class="text-muted">Trabajador :</span> Ninguno asociado</h6>
              <h6 class="font-14"><span class="text-muted">E-mail :</span> jstuardo@desytec.com</h6>
              <h6 class="font-14"><span class="text-muted">Teléfono :</span> </h6>
              <h6 class="font-14"><span class="text-muted">Cliente :</span> Ninguno asignado</h6>
              <h6 class="font-14"><span class="text-muted">Empresas :</span> Ninguna asignada</h6>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 d-flex">
    <div class="card flex-grow-1">
      <div class="card-header">
        <h3 class="card-title">Cambio de contraseña</h3>
      </div>
      <div class="card-body">
        <!-- 原有密码修改表单内容保持不变即可 -->
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="card">
      <div class="card-body">
        This is another card
      </div>
    </div>
  </div>
</div>

• 该方案完全使用Bootstrap内置工具类，不需要自定义CSS覆盖原有样式
• 卡片的圆角、阴影、内边距、底部外边距都会完整保留，两张卡片会自动撑满列高、底部对齐，同时和下方第二行卡片保持1.5rem的标准间距
• 不要使用“给列加内边距+卡片h-100”的hack写法，这种方式会把间距写死在列上，后续调整全局卡片边距时需要同步修改多处，维护成本高

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