用 Bootstrap 5 的 row + col 搭配 card 可构建响应式图片网格：小屏 col-12、中屏 col-sm-6、大屏 col-md-4 或 col-lg-3；配合 overflow: hidden、object-fit: cover 和 CSS 悬停动画实现美观一致的卡片效果。
用 Bootstrap 5 的 row + col 搭配 card 实现基础响应式图片网格
bootstrap 5 原生不提供“图片网格组件”，但用 row 和响应式栅格类（如 col-md-4、col-sm-6）配合 card 就能快速构建。关键不是套模板，而是控制每行的列数随屏幕变化自动调整。
常见错误是直接写死 col-3 —— 这在手机上会挤成一排 4 张小图，体验极差。正确做法是按断点分层：小屏 1 列、中屏 2 列、大屏 3 或 4 列。
-
col-12：所有设备单列（手机优先） -
col-sm-6：≥576px 显示 2 列 -
col-md-4：≥768px 显示 3 列 -
col-lg-3：≥992px 显示 4 列
注意：col 类必须放在 row 内，且总和应为 12（或自动换行），否则布局错位。
给图片卡片加悬停放大+遮罩文字，用纯 CSS 而非 JS
Bootstrap 5 已移除 :hover 相关 JS 插件，所有悬停效果必须靠 CSS 实现。核心是利用 transform: scale() 和 transition 控制动画，同时用 position: relative / absolute 叠加文字遮罩。
容易踩的坑：忘记加 overflow: hidden 在卡片容器上，导致图片放大时溢出；或者没设 transition 导致悬停卡顿。
- 给
.card加overflow: hidden和position: relative - 图片用
<img class="card-img">，并设transition: transform 0.3s ease - 悬停时加
.card:hover img { transform: scale(1.05) } - 文字遮罩用绝对定位的
.card-img-overlay，默认opacity: 0，悬停时opacity: 1
示例片段：
<div class="card h-100">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay d-flex align-items-center justify-content-center">
<h5 class="text-white">标题</h5>
</div>
</div>
解决图片高度不一致导致网格塌陷的问题
真实业务中，上传的图片宽高比千差万别，直接放进去会导致 card 高度参差不齐，网格错乱。Bootstrap 的 card 默认内容流式撑高，这不是 bug，是设计使然。
根本解法不是 JS 计算高度，而是用 CSS 截断或约束图片显示区域：
- 用
object-fit: cover+ 固定容器高（如height: 200px）强制裁剪居中显示 - 或用
min-height+object-fit: contain保持完整但留白 - 避免对
.card设固定height，否则文字可能被截断 - 如果用
card-img-top，记得它不支持object-fit，得换成普通<img>并手动加类
推荐方案：<img src="..." class="w-100" style="height: 200px; object-fit: cover;">
移动端触摸设备下悬停效果失效怎么办
真机上没有 :hover，所以纯 CSS 悬停在 iOS/Android 上默认不触发。这不是 Bootstrap 的问题，是浏览器规范限制。
如果你必须让触屏用户也能看到文字遮罩，有两个务实选择：
- 放弃“仅悬停显示”，改为默认显示文字，再用
opacity: 0.85+transition微调悬停增强（更可靠） - 加一层轻量 JS 监听
touchstart，给卡片临时加active类模拟悬停（注意防重复触发） - 完全不用悬停，改用点击展开详情（更适合内容型场景）
多数情况下，第一种最省事——把遮罩文字从“全隐藏→全显示”改成“半透明→全不透明”，既保体验又无兼容性风险。
真正难处理的是图片加载慢 + 悬停动画叠加导致的闪烁，这需要预设占位图或用 loading="lazy" 配合骨架屏，已超出本题范围。
