Bootstrap卡片hover效果：z-index致row行高丢失的响应式解决方案求助

问题根源 #

当卡片设置position: absolute后会脱离文档流，原本支撑父级列（col）和行（row）高度的元素消失，导致row塌陷。固定row高度会破坏响应式布局，所以需要让列保持原本的高度，同时卡片hover时不影响整体布局。

解决方案代码 #

CSS部分

.row {
  width: 100%;
}

/* 给列设置相对定位和最小高度，确保row不会塌陷 */
.card-col {
  position: relative;
  min-height: calc(20rem + 2rem); /* 卡片高度20rem + 上下margin各1rem */
}

.card {
  transition: all .2s ease-out;
}

.card:hover {
  position: absolute;
  top: 0;
  left: 0; /* 加上left:0确保卡片对齐列的左侧 */
  width: 130%;
  z-index: 1;
}

HTML部分

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<div>
  <div class="row bg-danger">
    <!-- 添加自定义类card-col -->
    <div class="mt-2 col-lg-4 col-md-6 col-12 card-col">
      <div class="card m-3" style="width: 18rem; height:20rem;">
        <div class="card-body">
          <h1 class="card-text">card 1</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="row bg-warning">
    <!-- 添加自定义类card-col -->
    <div class="mt-2 col-lg-4 col-md-6 col-12 card-col">
      <div class="card m-3" style="width: 18rem; height:20rem;">
        <div class="card-body">
          <h1 class="card-text">Card 2</h1>
        </div>
      </div>
    </div>
  </div>
</div>

关键说明 #

1. card-col类：通过position: relative让卡片hover时的absolute相对列定位，避免卡片乱跑；min-height确保列的高度和卡片未hover时一致，row不会塌陷。
2. 修正transition语法：原代码中transition(all .2s ease-out)是错误写法，正确应为transition: all .2s ease-out。
3. 添加left:0：确保hover时卡片对齐列的左侧，避免位置偏移。

如果卡片高度是自适应的（不是固定20rem），可以用JavaScript动态计算列的min-height，监听窗口 resize 事件更新高度，保证响应式适配。

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