bootstrap画廊应使用row+col-组合配合img-fluid，而非仅用figure或img-fluid；需为每张图设col类（如col-6 col-md-4），配object-fit:cover与固定容器高宽，并用row-cols-确保行内均分，grid布局比masonry更可靠。
图片画廊用 img-fluid 还是 figure？
直接用 img-fluid 只能单图自适应，画廊需要网格+响应式裁剪+对齐，光靠这个类不够。Bootstrap 的 figure 本身不带响应逻辑，真正起作用的是 row + col-* 组合，再配合 img-fluid 控制单图缩放。
常见错误：把所有 img 塞进一个 div class="row" 却没给子项加 col 类，结果在小屏上图片堆成一列、宽度溢出容器。
- 每张图必须包裹在
col下（如col-6 col-md-4 col-lg-3），不能只靠img-fluid -
img-fluid要加在img标签上，不是父div - 如果图比例不一致，建议统一用
object-fit: cover配合固定高宽容器，否则小屏下拉伸变形
如何让画廊在移动端自动换行且不留空白？
关键不在图片本身，而在 Bootstrap 的栅格断点和列数配置。默认 col-6 在 xs 屏是两列，但若内容高度差异大，最后一行可能只剩一张图、右侧大片留白。
使用场景：产品图册、作品集页面，用户滚动时希望视觉节奏一致。
- 避免用
col-12+text-center模拟画廊——无法响应式重排 - 推荐用
col-6 col-sm-4 col-md-3 col-lg-2，这样从手机到桌面自然过渡为 2→3→4→6 列 - 如果图高差异大，加
row-cols-2 row-cols-md-3类到row上，强制按行均分，比手动写col更稳 - 别忘了给
img加height: 100%和object-fit: cover，否则等比缩放后高度不齐
Grid 和 Masonry 布局哪个更适合 Bootstrap 画廊？
Bootstrap 5.3+ 原生不支持 Masonry（瀑布流），强行用 CSS column-count 或 JS 库会破坏 col 的响应行为，且与 gutters 冲突。真实项目中，规整 Grid 更可靠。
性能影响：Masonry 需要 JS 测量高度、重排 DOM，首屏加载慢；Grid 纯 CSS，无运行时开销。
- 优先用
row row-cols-*+col组合，兼容性好，SSR 友好 - 如果真需要 Masonry，用
display: grid配合grid-template-columns: masonry（仅 Chrome 116+ 支持，Firefox和Safari不认） - 第三方库如
masonry-layout会和 Bootstrap 的gutter计算打架，容易导致列间距错乱
为什么图片点击放大后布局错乱？
多数人用 modal 展示大图，但 Modal 默认是 position: fixed，关闭后若页面有滚动，body 可能被加上 modal-open 类却没清掉 padding-right，导致画廊区域突然左移。
错误现象：modal 关闭后，画廊列宽变窄、文字换行异常，刷新才恢复。
- 确保使用 Bootstrap 官方
modal，并检查是否引入了bootstrap.bundle.min.js（含 Popper） - 不要手动给
body加overflow: hidden——modal会自动处理，重复设置会干扰 - 如果画廊用了
sticky-top或position-sticky，Modal 打开时可能触发重绘异常，建议改用position: relative+top微调
实际做下来，最易被忽略的是 row-cols-<em></em> 和 col 的混用边界：前者控制“每行几项”，后者控制“每项占几列”，两者同时存在时，后者优先级更高，但小屏下若没配 col-xs，row-cols- 就失效。这点不试几次根本意识不到。
