图片网格中标题错位需用position-relative包裹+absolute定位到底部，配overflow:hidden防溢出；推荐card组件并重置样式，控制图片高度与标题省略，预设宽高比防加载塌陷。
图片网格用 row 和 col 搭配就能响应式，但标题位置容易错乱
bootstrap 的栅格系统本身不处理图文混排的对齐逻辑，直接把 <img alt="Bootstrap如何实现响应式的带文字标题的图片网格" > 和 <p></p> 并列放在 col 里，小屏下文字可能换行撑高、图片被拉伸、标题和图片错位。关键不是“能不能”，而是怎么让标题始终贴着图片底部、且不破坏栅格流。
- 别把标题写在
img标签外层再套div——这样标题会脱离图片容器上下文，col高度由内容撑开后不一致 - 用
position: relative包裹图片和标题，标题设position: absolute; bottom: 0，这样它永远钉在图片底边 - 给包裹容器（比如
<div class="position-relative">）加 <code>overflow: hidden，防止标题文字过长时溢出或换行压到图片 -
img必须设class="w-100"或style="width: 100%; height: auto;"，否则在某些col尺寸下会失真 - 去掉多余样式：加
class="card border-0 bg-transparent shadow-none" - 标题用
<h5 class="card-title mb-0"></h5>，避免card-text的默认上下边距干扰垂直居中 - 图片高度需控制，否则小屏下
card高度浮动太大；推荐统一设style="height: 200px; object-fit: cover;"（注意object-fit在 IE 不支持） - 如果网格列数随屏幕变化（如 lg:4、md:3、sm:2），直接用
col-lg-3 col-md-4 col-sm-6，别依赖card-deck——它已废弃且不响应式 - 单行省略：加类
text-truncate（仅限 Bootstrap 5.2+），或手动写style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" - 多行省略（如两行）：必须用
display: -webkit-box+-webkit-line-clamp: 2，且容器设固定max-height（例如2.8em） - 千万别只设
overflow: hidden而不控高——文字会被裁掉顶部，视觉上像消失而不是省略 - 字体大小建议用
fs-sm或fs-xs（Bootstrap 5.3+），避免在 xs 屏下文字挤满整张图 - 把整个
col或card设为position: relative，再用伪元素::before覆盖全区域并设content: ""，这样点击热区完整 - 加
class="text-decoration-none"到链接外层，消除下划线干扰视觉 - 悬停效果建议用
transform: translateY(-2px)+box-shadow，比单纯变色更明确表示“可点” - 触摸设备上，
:active状态要加opacity: 0.8，否则用户不知道操作已被接收
card 组件比纯栅格更稳，但默认样式要重置
Bootstrap card 天然支持图文+标题组合，card-img-top + card-body 能保证结构隔离，响应式也可靠。但它自带内边距、圆角、阴影，跟“纯图片网格”视觉冲突。
文字标题超出时截断或省略，别让它破坏布局
真实场景里标题长度不可控，放任换行会导致同一行卡片高度不一致，网格“错行”。CSS 的 text-overflow: ellipsis 必须配合固定高度和 display: -webkit-box 才生效，纯 Bootstrap 类不够用。
移动端点击区域小，得给整个卡片加可点击反馈
如果网格项要跳转或触发交互，只给标题或图片加 cursor: pointer 不够——用户手指点空隙区域没反馈，体验断裂。但直接给 col 加 onclick 又难控制样式状态。
最麻烦的其实是图片加载完成前的高度塌陷——col 高度为 0，标题直接堆在顶部。要么预设宽高比（aspect-ratio: 4/3），要么等图片加载完再显示容器（img.onload 触发 classList.remove("loading")）。这个细节，上线前很容易漏测。
