如何解决Bootstrap中3列图片无法在同一行显示的问题？

问题根源 #

你的第三张图片所在的col-lg-4容器不在同一个.row容器内，Bootstrap栅格系统要求所有列必须放在同一个.row下才能正确排列在一行。

修正后的代码 #

<div class="container-fluid">
  <div class="row align-content-center">

    <div class="col-lg-4 col-md-6 d-flex">
      <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">
      <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>

    <!-- 将第三列移至row容器内部 -->
    <div class="col-lg-4 col-md-6 d-flex">
      <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>

补充说明 #

• Bootstrap的.row是栅格布局的核心行容器，所有col-*列必须作为.row的直接子元素，才能通过row的负margin和col的padding规则消除间距、正确分配宽度。
• 原代码中前两列在.row内部，第三列独立在.row外，相当于触发了新的行布局，因此会被挤到下方。

内容的提问来源于stack exchange，提问作者Xinyu Yang