手机端漫画画廊必须用col-12：因Bootstrap移动端默认不等分，col-md-4在手机上失效致布局错乱；应显式设col-12确保单列，小屏可选col-6，iPad用col-sm-4；必加img-fluid且父容器禁overflow:hidden；手势翻页须弃carousel，改用scroll-snap+scroll-snap-align；加载前需aspect-ratio或宽高属性占位防重排。
手机端漫画画廊必须用 col-12 而不是 col-md-4
Bootstrap 的栅格在移动端默认是堆叠的，但很多人直接照搬桌面端写法，用 col-md-4 套漫画缩略图，结果在手机上只显示一列、留大片空白、还带横向滚动——因为 md 断点以上才生效，手机走的是 col（无断点）默认规则，而默认值不是 12 等分，是“不设宽度”，靠内容撑开。
正确做法是显式声明移动端行为：
- 所有漫画项统一用
col-12，确保每张图独占一行 - 若想在小屏（如 iPhone SE）上并排两张，改用
col-6；iPad 尺寸可叠加col-sm-4实现三列 - 避免混用
col-6 col-md-3这类组合——md以上会突然变四列，图片被压扁，字体/间距失衡
img-fluid 必须加，且不能被父容器 overflow: hidden 截断
漫画图常为长条形（如 800×2000），img-fluid 能让图片随容器缩放，但前提是父元素没设死高度或隐藏溢出。常见翻车场景：
- 用
card包裹图片后，忘记移除card-img-top默认的max-height: 100%或object-fit: cover——这会让图片被裁切 - 给外层
row加了overflow-x: auto想做横向滚动，结果整页变成横向滑动，失去垂直浏览逻辑 - 未设置
height: auto，导致图片高度塌陷，只显示顶部几像素
稳妥写法：
<div class="col-12"> <img src="page1.jpg" class="img-fluid" alt="第1话" style="max-width:90%"> </div>
手势滑动要关掉 carousel，改用纯 CSS + scroll-snap
Bootstrap carousel 默认禁用触摸拖拽（尤其在 iOS Safari），且自带定时轮播、左右箭头，完全不符合漫画逐页阅读需求。真要滑动翻页，应绕过 JS 组件，用原生滚动控制：
- 给画廊容器加
scroll-snap-type: y mandatory和overflow-y: scroll - 每个
col-12项加scroll-snap-align: start - 务必设置
scroll-behavior: smooth，否则跳转生硬 - 禁用默认滚动条干扰：
scrollbar-width: none（Firefox）和::-webkit-scrollbar { display: none }
注意：iOS Safari 对 scroll-snap 支持良好，但需确保容器有明确高度（比如 min-height: 80vh），否则 snap 失效。
加载大图前先占位，否则页面反复重排
漫画单页常超 2MB，加载慢会导致图片载入时突然撑开布局，文字跳动、按钮错位。不能依赖 loading="lazy" 一劳永逸——它只控制加载时机，不解决尺寸未知问题。
- 用
aspect-ratio: 9/16（或你漫画的实际宽高比）固定容器比例，再让img绝对定位居中 - 或者更兼容：在
img标签里预设width和height属性（如width="800" height="2000"），即使没 CSS 也能保留空间 - 避免用
background-image加载漫画图——无法自然响应srcset和懒加载，也难适配深色模式
最简占位方案：
<div class="col-12" style="aspect-ratio: 9/16;"> <img src="page1.jpg" class="img-fluid" alt="第1话"> </div>
实际项目里，漫画页数多、体积大，scroll-snap 容器一旦包含几十张高清图，内存和首屏加载压力就很明显——得配合 IntersectionObserver 做按需加载，那已经是另一层优化了。
