本文详解如何在 Bootstrap 5 中实现平滑的卡片悬停放大动画，并通过 row-cols-* + col 布局彻底解决重叠遮挡与末行填充问题，兼容动态数据渲染。

本文详解如何在 bootstrap 5 中实现平滑的卡片悬停放大动画，并通过 `row-cols-*` + `col` 布局彻底解决重叠遮挡与末行填充问题，兼容动态数据渲染。

Bootstrap 5 已正式废弃 .card-deck 类（自 v5.2 起），其设计初衷是被更灵活、语义更清晰的栅格系统取代。若继续使用 .card-deck，不仅会导致悬停时卡片相互重叠（因 card-deck 采用 display: flex 且无自动换行控制），还会在卡片数量非 4 的整数倍时强制拉伸末行卡片以填满整行——这正是你遇到的两个核心问题的根源。

✅ 正确解法：改用 row row-cols-4 g-2 容器 + 每张卡片包裹在独立 .col 中，并统一设置 h-100 保证高度一致：

<div class="container mt-4">
  <div class="row">
    <div class="col">
      <!-- 使用 row-cols-4 实现每行最多 4 列，自动换行 -->
      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3">
        @forelse ($meetings as $meeting)
          @csrf
          <div class="col">
            <div class="card bg-dark h-100 border-0 shadow-sm overflow-hidden transition-all duration-200">
              @if ($meeting['photoName'])
                @@##@@title }}"
                     style="height: 180px;">
              @else
                @@##@@
              @endif
              <div class="card-body d-flex flex-column p-3">
                <a href="%7B%7B%20route('meeting.show',%20%24meeting->id)%20%7D%7D" class="stretched-link text-white text-decoration-none fw-bold fs-6">
                  {{ Str::limit($meeting->title, 36) }}
                </a>
                <small class="text-muted mt-auto pt-2">{{ $meeting->date ?? '—' }}</small>
              </div>
            </div>
          </div>
        @empty
          <div class="col-12 text-center py-5">
            <h4 class="text-secondary">暂无会议信息</h4>
          </div>
        @endforelse
      </div>
    </div>
  </div>
</div>

? 关键优化说明：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 消除重叠：row-cols-* 基于 CSS Grid 实现，每张卡片为独立网格项，悬停缩放时不会影响其他行布局；配合 overflow-hidden 防止内容溢出。
• 保留末行完整性：Grid 自动按列数分组，剩余卡片自然居左排列（不拉伸），无需额外处理。
• 响应式列数：row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 实现移动设备 → 大屏的渐进式适配（可按需调整）。
• 动画更流畅：将 transition: transform .2s ease-out 加入 .card，并移除冗余前缀（Bootstrap 5 默认支持现代浏览器）：

.card {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.card:hover {
  transform: scale(1.04); /* 建议 1.04–1.08，避免过大导致布局跳变 */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

⚠️ 注意事项：

• 避免在 .card 上设置固定 height（如 height: 200px），否则响应式失效；改用 h-100 + 内部 object-fit-cover 控制图片比例。
• transform: scale() 会触发 GPU 加速，但过度放大（如 1.25）易造成边缘锯齿或文字模糊，推荐 1.04–1.08 更兼顾美观与性能。
• 若需悬停时提升层级防止被遮挡，可添加 z-index: 2 到 .card:hover（需确保父容器 position: relative）。

最终效果：卡片悬停时优雅微缩放、无重叠、末行自然对齐、全设备适配——真正符合 Bootstrap 5 设计哲学的现代化实现。