<p>单图自适应靠 img-fluid，画廊布局需栅格系统组合：用 .row 包裹，.col-* 控制列数，.g-0 清除间隙，Bootstrap 5+ 支持间距工具类，断点选择依实际设备占比而定。</p>
用 img-fluid 保证单图自适应，但画廊不是靠它撑起来的
单张图片加 img-fluid 类确实能随容器缩放，可画廊一排多图时，它不解决排列、间隙、断点对齐问题。真正起作用的是栅格系统 + 工具类组合。别指望一个 class 搞定全部。
- 必须用
.row包裹，子项用.col-*控制每行几张（比如.col-md-4实现中屏三列） -
img-fluid要加在<img>上，不是父容器；漏掉就失去等比缩放能力 - 默认
.col有左右 15px padding，导致图片间有空隙——用.g-0（或.gx-0/.gy-0）清除，否则画廊出现错位白边 - Bootstrap 5+ 才支持
.g-*间距工具类；旧版本得手动写mx-n2或重置 margin
响应式断点选 .col-sm-6 还是 .col-lg-3？看真实设备占比
别机械套用“小屏 1 列、中屏 2 列、大屏 4 列”。实际访问量集中在手机（
- 推荐务实写法：
.col-12 .col-md-6 .col-xl-3—— 手机竖屏全宽、中屏双列、大屏四列，跳过平板专属规则 -
.col-sm-6在 iPhone SE 等窄屏上会强制两列，图片被压扁；.col-12保证最小屏必为单列 - 如果后端返回图片尺寸差异大（比如混有横图/竖图），加
.object-fit-cover配合固定高容器，避免拉伸变形
点击放大功能不用 JS 插件，用原生 data-bs-toggle="modal" 就够用
多数人一想到“画廊放大”就搜 fancybox、lightgallery，其实 Bootstrap 自带模态框就能满足基础需求，零依赖、体积小、无障碍友好。
- 每张缩略图加
data-bs-toggle="modal" data-bs-target="#imageModal" - 模态框里用
<img src="" class="img-fluid">，确保放大后仍可缩放 - 关键细节：给
<img>加loading="lazy"，否则模态框打开瞬间加载所有大图，卡顿明显 - 如果图片来自 CMS 或用户上传，注意路径拼接——
src值必须是完整可访问 URL，相对路径在模态框里容易 404
遇到 TypeError: Modal is not a constructor？检查 JS 加载顺序和模块引入方式
这个错误几乎只发生在 Bootstrap 5+ 的 ES 模块项目里，不是 CDN 引入失败，而是调用方式不匹配。
- CDN 引入（
<script src="bootstrap.bundle.min.js">）：直接用new bootstrap.Modal(...) - Vite/Webpack 项目用 ES 模块：必须显式导入
import { Modal } from 'bootstrap'，否则全局bootstrap对象不存在 - 如果用了按需引入（比如只 import { Modal }），但忘记 import { Tooltip }，而画廊里又写了
data-bs-toggle="tooltip"，也会触发同类报错 - 检查浏览器控制台是否报
Failed to resolve module specifier "bootstrap"——那是路径配置问题，不是代码逻辑问题
画廊最难的从来不是排列或放大，而是图片加载时机和宽高比不一致导致的布局抖动。加 height 或 aspect-ratio 固定容器，比堆 JS 补丁更治本。
