本文详解 bootstrap 布局中三列图片无法同行显示的常见原因及修复方案，重点指出 html 结构嵌套错误（多余闭合标签导致行中断），并提供规范代码、响应式适配说明与实践建议。
本文详解 bootstrap 布局中三列图片无法同行显示的常见原因及修复方案，重点指出 html 结构嵌套错误（多余闭合标签导致行中断），并提供规范代码、响应式适配说明与实践建议。
在使用 Bootstrap 构建响应式作品集（Portfolio）时，开发者常期望三张图片在桌面端严格并排显示于同一行——即每列占 col-lg-4（共 12 栅格），形成等宽三列布局。但实践中，第三张图片“跳行”是高频问题，其根源往往并非 CSS 或栅格系统失效，而是 HTML 结构误用。
? 问题定位：非法的 DOM 嵌套破坏了 .row 的容器完整性
观察原始代码，关键错误在于：
<div class="row align-content-center"> <!-- 第一列 --> <div class="col-lg-4 ...">...</div> <!-- 第二列 --> <div class="col-lg-4 ...">...</div> </div> <!-- ❌ 这里提前闭合了 .row --> <!-- 第三列被错误地置于 .row 外部 --> <div class="col-lg-4 ...">...</div> <!-- ⚠️ 此 div 不属于任何 .row，Bootstrap 栅格失效 -->
由于
被过早关闭，第三个 .col-lg-4 元素脱离了栅格上下文，浏览器将其渲染为普通块级元素，自然独占一行。Bootstrap 的栅格系统严格依赖 .row → .col-* 的父子关系，任何断裂都会导致布局崩溃。
✅ 正确写法：所有列必须严格嵌套在同一 .row 内
修复后的标准结构如下（已优化缩进与语义）：
<div class="container-fluid">
<div class="row align-items-center"> <!-- 推荐使用 align-items-center（垂直居中子项）而非 align-content-center（用于多行内容） -->
<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）可快速暴露未闭合/错位标签；
- 响应式兼容性：col-lg-4 在 ≥992px 宽度下生效，而 col-md-6 确保在平板（768–991px）上两列并排，符合移动优先原则；
- 垂直对齐优化：align-items-center 作用于 .row，使所有 .col 内容在交叉轴（Y轴）居中；若需列内图片自身垂直居中，d-flex + align-items-center 可叠加使用；
-
避免冗余容器：勿为单个 .col 额外包裹无意义的 ，防止意外引入 margin/padding 影响宽度计算；
- 图片尺寸控制：.img-fluid 已确保图片响应式缩放，但需确认原始图片宽高比一致，否则可能因高度差异导致 align-items-center 效果不均。
? 总结
三列图片无法同行，90% 源于 HTML 结构错误而非 CSS 缺失。牢记 Bootstrap 栅格铁律：*所有列（`.col-）必须且只能直接位于同一.row容器内**。通过规范缩进、验证嵌套、理解类名语义（如align-items-vsalign-content-`），即可高效解决此类布局故障。调试时，优先审查 DOM 结构树，再排查样式，事半功倍。
