Bootstrap技术问题：设置justify-content-center的div内部Row元素无法垂直依次排列？

这个问题的核心是Bootstrap的.row类默认采用横向flex布局（flex-direction: row），所以你最外层.row里的三个子.row会并排显示，而不是垂直堆叠。这里有两种简单的调整方案：

方案一：修改外层容器的flex方向 #

把最外层的.row替换成d-flex flex-column（手动指定垂直flex布局），同时保留居中相关的类，这样内部元素会自动垂直排列：

<div class="d-flex flex-column mt-2 justify-content-center align-items-center">
  <div class="row">
    <figure>
      <img src="../img/dummy.jpg" class="rounded" />
      <figcaption class="text-center"><h3>Title</h3></figcaption>
    </figure>
  </div>
  <!-- 给按钮添加mt-2增加间距，让布局更美观 -->
  <div class="row mt-2">
    <button type="button" class="btn btn-sm btn-outline-primary">Button 1</button>
  </div>
  <div class="row mt-2">
    <button type="button" class="btn btn-sm btn-outline-primary">Button 2</button>
  </div>
</div>

方案二：给子容器添加列宽类 #

保留最外层的.row，但给每个子.row加上col-12类，让它们占满整行宽度，自然垂直堆叠：

<div class="row mt-2 justify-content-center">
  <div class="row col-12">
    <!-- 给figure添加flex布局，让图片和标题居中 -->
    <figure class="d-flex flex-column align-items-center">
      <img src="../img/dummy.jpg" class="rounded" />
      <figcaption><h3>Title</h3></figcaption>
    </figure>
  </div>
  <!-- 给按钮容器添加justify-content-center让按钮居中，mt-2增加间距 -->
  <div class="row col-12 justify-content-center mt-2">
    <button type="button" class="btn btn-sm btn-outline-primary">Button 1</button>
  </div>
  <div class="row col-12 justify-content-center mt-2">
    <button type="button" class="btn btn-sm btn-outline-primary">Button 2</button>
  </div>
</div>

两种方案都能实现按钮在figure下方的效果，你可以根据自己的布局需求选择。如果需要按钮也居中显示，记得给按钮所在的容器加上justify-content-center类哦。

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