本文详解如何在 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'])
<img src="{{ url($meeting['photoName']) }}"
class="card-img-top object-fit-cover"
alt="{{ $meeting->title }}"
style="height: 180px;">
@else
<img src="https://www.arqhys.com/general/wp-content/uploads/2011/07/Roles-de-la-inform%C3%A1tica.jpg"
class="card-img-top object-fit-cover"
alt="Placeholder"
style="height: 180px;">
@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 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>? 关键优化说明：
- 消除重叠：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 设计哲学的现代化实现。
