Bootstrap图片画廊布局 Bootstrap如何制作一个响应式相册-Bootstrap教程-PHP中文网

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 加载大图。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

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 很难暴露出来。