本文详解如何在 Bootstrap 5 中实现平滑卡片悬停缩放动画，同时解决因废弃 .card-deck 导致的重叠遮挡和不完整行填充问题，推荐使用 row-cols-* + col 布局替代旧方案。
本文详解如何在 bootstrap 5 中实现平滑卡片悬停缩放动画，同时解决因废弃 `.card-deck` 导致的重叠遮挡和不完整行填充问题，推荐使用 `row-cols-*` + `col` 布局替代旧方案。
Bootstrap 5 已正式移除 .card-deck 类（见 官方迁移指南），其设计初衷是统一交由 Grid 系统控制布局。若继续沿用 .card-deck，配合 transform: scale() 悬停动画，极易引发两个典型问题：卡片溢出覆盖上一行内容（z-index 与文档流冲突），以及最后一行被强制补满（.card-deck 内部采用 flex flex-wrap + 等宽拉伸，破坏自然列数）。
✅ 正确解法：改用语义清晰、控制力更强的 Grid 布局组合：
- 使用 作为容器，row-cols-4 表示每行最多显示 4 列（响应式断点下可叠加如 row-cols-md-3 row-cols-lg-4）；
- 每张卡片包裹在
内，由 Grid 自动分配宽度并处理换行；- 为卡片添加 h-100 类，确保同一行内卡片高度一致，避免因内容差异导致悬停时错位；
- 移除固定 height 和 width，让卡片自适应列宽，提升响应式健壮性。
以下是优化后的 CSS（精简高效，兼容现代浏览器）：
.card { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .card:hover { transform: scale(1.08); /* 更柔和的缩放比例，避免突兀 */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); z-index: 10; /* 提升层级，确保悬停时覆盖相邻卡片而非被遮挡 */ } .card-img-top { height: 75%; object-fit: cover; } /* 可选：增强移动端体验 */ @media (max-width: 575.98px) { .card { max-width: 100%; } }对应 Blade 模板更新如下（关键变更已加注释）：
<div class="container mt-4"> <div class="row"> <div class="col"> <!-- ✅ 替换 .card-deck → .row.row-cols-4.g-2 --> <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 mb-3 bg-dark h-100 border-0"> @if ($meeting['photoName']) <img class="card-img-top" src="{{ url($meeting['photoName']) }}" alt="{{ $meeting->title }}"> @else <img class="card-img-top" src="https://www.arqhys.com/general/wp-content/uploads/2011/07/Roles-de-la-inform%C3%A1tica.jpg" alt="Placeholder image"> @endif <div class="card-body d-flex flex-column p-3"> <a href="{{ route('meeting.show', $meeting->id) }}" class="stretched-link text-white text-decoration-none fw-bold"> {{ Str::limit($meeting->title, 30) }} </a> <small class="text-muted mt-auto">{{ $meeting->date ?? 'N/A' }}</small> </div> </div> </div> @empty <div class="col-12"> <div class="alert alert-info mb-0">暂无会议信息</div> </div> @endforelse </div> </div> </div> </div>? 关键注意事项：
- g-3（即 gap: 1rem）替代了旧版 margin-bottom，避免悬停时因外边距塌陷导致跳动；
- h-100 + d-flex flex-column + mt-auto 实现标题与元信息的垂直对齐，提升视觉一致性；
- z-index: 10 是解决「悬停卡片被下方卡片遮盖」的核心——必须配合 position: relative（Bootstrap .card 默认已设），否则无效；
- 若需支持 IE11，请保留 -ms-transform 并启用 @supports 特性检测，但建议优先面向现代浏览器。
最终效果：卡片悬停时平滑放大、不遮挡、不挤压，且最后一行严格按实际数据渲染（如仅有 2 张卡片，则只显示 2 列），完全符合语义化与响应式设计原则。
- 每张卡片包裹在
