Bootstrap无内置画廊组件，需用栅格系统（.row+.col-*）布局、img-fluid缩放、.g-0清间隙，并配合模态框或lightgallery.js实现点击放大；须注意响应式断点选择、object-fit防变形、loading="lazy"优化加载及ES模块导入规范。
Bootstrap 本身没有叫 gallery 的内置组件，也不存在官方命名的“画廊组件”。所谓“Bootstrap 画廊”，实际是用栅格系统 + 工具类 + 模态框拼出来的效果，不是开箱即用的黑盒。
为什么不能直接用 img-fluid 做画廊
img-fluid 只负责单图等比缩放，它不控制排列、间隙、断行或点击行为。直接给一堆 <img> 加 img-fluid，在小屏上会垂直堆叠但宽度失控，在中屏可能挤成一排却留白严重——因为没用 .row 和 .col-* 约束布局流。
- 漏掉
.row包裹：子项.col的负 margin 失效，左右 padding 叠加出意外空隙 - 忘记清间距：
.g-0不加，.col默认带15px水平 padding，图片间出现白边 - 在 Bootstrap 4 或更早版本里用
.g-0：无效，得手动写mx-n2或重置padding - 响应式断点选错：
.col-sm-6在 iPhone SE（320px 宽）上强制两列，竖图被压扁；改用.col-12 .col-md-6 .col-xl-3更稳
模态框实现 Lightbox 的真实限制
用 data-bs-toggle="modal" 配合 #imageModal 是轻量解法，但它只适合静态路径、数量可控的图片。一旦后端返回图片数组，就得手写循环渲染，且每张图要单独配 data-bs-target 和 src，容易漏掉 loading="lazy" 导致模态框打开卡顿。
- 大图
src必须是完整 URL：相对路径在模态框里常 404，尤其当页面路由含子路径时 -
TypeError: Modal is not a constructor多半是因为 ES 模块项目里没显式import { Modal } from 'bootstrap'，只靠 CDN 的全局对象不管用 - 如果画廊里混用了
data-bs-toggle="tooltip"却没导入 Tooltip 模块，也会触发同类报错，和 Modal 无关 - 所有缩略图共用一个模态框 ID 时，必须用 JS 动态改
#imageModal img的src，否则点哪张都显示第一张
性能与兼容性绕不开的三个坑
画廊看着简单，但图片加载、尺寸不一、旧版 Bootstrap 支持这三件事，最容易在线上翻车。
- 混有横图/竖图时，仅靠
img-fluid会拉伸变形；必须套固定高容器 +object-fit: cover，且父容器设overflow: hidden - 未启用
loading="lazy"：模态框里所有大图在页面加载时就发起请求，首屏性能直降 - Bootstrap 5+ 的
.g-*间距工具类在 IE11 完全不可用；若需兼容，得降级用mx-n2+ 自定义 CSS - WebP 图片虽小，但 Safari 旧版本（≤13.1）不支持；上线前得确认 fallback 逻辑是否生效
真正难的不是搭出能看的画廊，而是让不同尺寸、不同来源、不同加载时机的图片，在各种设备和网络条件下，既不崩布局，也不拖慢首屏，还不报 JS 错——这些细节不会出现在文档示例里，但线上用户一眼就能感知。
