本文详解 bootstrap 布局中三列图片错位跳行的典型原因与修复方案，重点指出 html 结构嵌套错误（多余闭合标签）导致的栅格失效问题，并提供规范、可复用的响应式代码示例。
本文详解 bootstrap 布局中三列图片错位跳行的典型原因与修复方案，重点指出 html 结构嵌套错误（多余闭合标签）导致的栅格失效问题，并提供规范、可复用的响应式代码示例。
在使用 Bootstrap 构建响应式作品集（Portfolio）时，常见的目标是让三张项目图片在大屏（lg+）下并排显示为等宽三列，在中屏（md）下自动回退为两列，在小屏（sm）下堆叠为单列——这本可通过 Bootstrap 的栅格系统原生支持。但实践中，许多开发者会遇到“第三张图始终换行”的问题，其根源往往并非 CSS 或断点设置错误，而是HTML 结构误嵌套。
观察原始代码可发现关键问题：
- 第一个 在第二列后被意外提前闭合（存在未注释的）；
- 第三列 被错误地置于 .row 外部，导致它脱离栅格容器，无法参与 flex 布局计算；就足以破坏整行布局。养成缩进检查、分组验证的习惯，比调试 CSS 更高效。修复后，三列图片将在所有支持断点下稳定并排，为作品集呈现专业、一致的视觉流。
- Bootstrap 的 .row 要求所有 .col-* 子元素必须严格直属于同一 .row 元素内，否则栅格逻辑中断，.col-lg-4 的宽度声明将失效，浏览器按普通块级元素渲染，自然换行。
✅ 正确写法应确保三列同属一个 .row，且无冗余闭合标签：
<div class="container-fluid"> <div class="row align-items-center"> <!-- 推荐使用 align-items-center（垂直居中子项），align-content-center 仅对多行 flex 容器有效 --> <div class="col-lg-4 col-md-6 d-flex justify-content-center"> <figure class="figurefx pushup"> <img src="assets/img/work-sample/hive.jpg" class="img-fluid" alt="Hive II"> <figcaption><a href="#">Hive II</a></figcaption> </figure> </div> <div class="col-lg-4 col-md-6 d-flex justify-content-center"> <figure class="figurefx pushup"> <img src="assets/img/work-sample/jackson.jpg" class="img-fluid" alt="Jackson House"> <figcaption><a href="#">Jackson House</a></figcaption> </figure> </div> <div class="col-lg-4 col-md-6 d-flex justify-content-center"> <figure class="figurefx pushup"> <img src="assets/img/work-sample/p5.jpg" class="img-fluid" alt="P5 Residence"> <figcaption><a href="#">P5 Residence</a></figcaption> </figure> </div> </div> </div>? 关键修复点与最佳实践：
- ✅ 结构校验：使用代码编辑器的自动缩进/折叠功能，或在线 HTML 校验工具（如 W3C Validator），快速识别标签错位；
- ✅ 语义清晰：.row 内只包含 .col-*，避免插入无关 div 或过早闭合；
- ✅ 垂直对齐优化：align-items-center 替代 align-content-center，确保单行 flex 容器内子项垂直居中；
- ✅ 水平居中增强：为每个 .col 添加 d-flex justify-content-center，使图片在列内水平居中，提升视觉一致性；
- ⚠️ 注意响应行为：col-lg-4（≈33.33%）+ col-md-6（50%）组合在 ≥992px 屏幕下强制三列，在 ≥768px 屏幕下转为两列（因 6+6=12），符合预期；无需额外 CSS。
总结：Bootstrap 的栅格能力强大，但高度依赖正确的 HTML 结构。一次多余的
