Bootstrap 5图片画廊应使用row+col栅格布局而非carousel，搭配lightgallery.js实现响应式放大、触控滑动与流量优化；需正确配置srcset/sizes、allowScrollInside等关键参数。
Bootstrap 5 图片画廊用 row + col 就够了，别套 carousel
bootstrap 的 carousel 是为轮播设计的，不是画廊；强行塞一堆图进去，操作卡、缩略图难对齐、移动端点选困难。真做相册，直接用栅格系统更轻、更可控。
常见错误是把每张图包进一个 carousel-item，结果鼠标悬停没反应、点击放大没入口、小图在手机上挤成一列还留白严重。
- 用
row包裹，子项全用col-6 col-sm-4 col-md-3 col-lg-2控制列数（数字越小，单页显示越多） - 每张图外层加
position-relative，方便后续叠加放大按钮或图注 - 图片统一用
img-fluid，避免拉伸变形；别设固定height，否则响应式失效
点击放大需要自己接 lightgallery.js，Bootstrap 不自带
Bootstrap 5 官方组件里根本没有图片放大功能，网上很多教程用 modal 手动拼，结果点开后图片糊、不能滑动、ESC 关不掉——因为没处理 img 的自然尺寸和容器约束。
真正省事又稳的方式是引入轻量第三方库：lightgallery.js。它原生支持触屏滑动、缩放、下载按钮，且 CSS 只加载必要部分。
- CDN 引入顺序必须是：先
lightgallery.umd.js，再lg-zoom.js（要缩放）或lg-fullscreen.js（要全屏） - 初始化时 target 要写对：
document.getElementById('gallery')，不能只写#gallery - 如果图是异步加载（比如从 API 渲染），得等 DOM 插入完成再调
lg初始化，否则绑定失败
img 标签 srcset 和 sizes 配合 Bootstrap 栅格能省 60% 流量
画廊里一张图传三套尺寸却只用一套展示，是典型浪费。浏览器其实能根据 col 实际宽度自动选最合适的图源，但前提是写对 srcset 和 sizes。
比如 col-md-3 在中屏下占 25% 宽度，那 sizes 就该写 (min-width: 768px) 25vw，不然 Chrome 会默认按 100vw 加载大图。
-
srcset每项格式为："small.jpg 480w, medium.jpg 768w, large.jpg 1200w"，单位必须是w（像素宽度），不是px -
sizes要对应栅格断点：sizes="(max-width: 575.98px) 100vw, (max-width: 767.98px) 50vw, 25vw" - 别信“用 picture + source”，Bootstrap 栅格本身不触发 media query 切换，
picture在这里反而让逻辑变重、缓存失效
移动端手势冲突：lightgallery 默认禁用 touchmove，但可能影响页面滚动
在 iOS Safari 上，打开画廊后上下滑动偶尔卡住，或者手指刚移出图片区域就关闭了弹窗——这是 lightgallery 为了防误触主动阻止了 touchmove 事件，但它没区分是图内拖拽还是页面滚动。
解决方法不是关掉整个触摸控制，而是精准放开 Y 轴：
lightGallery(document.getElementById('gallery'), {
selector: 'a',
allowMediaOverlap: true,
enableTouch: true,
enableDrag: true,
// 关键：允许 Y 方向滚动穿透到父容器
allowScrollInside: false
});
注意 allowScrollInside: false 这个配置，它会让 lightgallery 把纵向滑动手势交还给 body，避免“点了放大图却滚不动页面”的尴尬。这个点文档里藏得深，但线上真实用户反馈最多。
复杂点在于，如果你画廊嵌在 modal 或 sticky header 下，还得额外监听 scroll 事件手动重置 gallery 的容器高度，否则放大后底部内容错位。这种边界情况，光看 demo 很难暴露出来。
