移除按钮后Bootstrap col-auto布局高度对齐异常求助

问题分析 #

当前布局中Footer用col-auto自适应高度，内部row通过align-items-center实现垂直居中。移除prev-btn后，右侧按钮容器的布局变化触发了align-items-center的对齐逻辑异常，导致Footer区域的高度和内部元素出现视觉错乱——本质是row的高度依赖子元素的最高高度，当子元素高度变化时，垂直居中的对齐方式会引发其他元素的位置偏移。

解决方法 #

方案1：改用拉伸对齐+子元素自居中 #

把Footer内部row的align-items-center替换为align-items-stretch，同时给每个包含内容的col添加d-flex align-items-center，让每个列撑满行高，内部内容自行垂直居中，规避行级对齐带来的问题。

修改后的Footer代码：

<footer class="col-auto">
  <div class="container-fluid p-3 bg-light">
    <div class="row g-0 align-items-stretch">
      <div class="col d-flex align-items-center">
        <button class="btn fw-bold btn-outline-danger shadow-none">CANCEL &amp; RESTART</button>
      </div>
      
      <div class="col-auto px-3 d-flex align-items-center text-center">STEP 1 OF 4</div>
      
      <div class="col d-flex align-items-center justify-content-end">
        <button class="btn fw-bold btn-outline-secondary px-5 me-3 shadow-none prev-btn">PREVIOUS</button>
        <button class="btn fw-bold btn-outline-primary px-5 shadow-none">NEXT</button>
      </div>
    </div>
  </div>
</footer>

方案2：外层容器控制垂直居中 #

给Footer的container-fluid添加d-flex align-items-center，直接通过外层弹性容器控制内容垂直居中，内部row仅负责水平布局：

修改后的Footer代码：

<footer class="col-auto">
  <div class="container-fluid p-3 bg-light d-flex align-items-center">
    <div class="row g-0 w-100">
      <div class="col">
        <button class="btn fw-bold btn-outline-danger shadow-none">CANCEL &amp; RESTART</button>
      </div>
      
      <div class="col-auto px-3 text-center">STEP 1 OF 4</div>
      
      <div class="col">
        <div class="d-flex justify-content-end">
          <button class="btn fw-bold btn-outline-secondary px-5 me-3 shadow-none prev-btn">PREVIOUS</button>
          <button class="btn fw-bold btn-outline-primary px-5 shadow-none">NEXT</button>
        </div>
      </div>
    </div>
  </div>
</footer>

效果说明 #

两种方案都能保证移除prev-btn后，Footer高度保持稳定，内部元素始终垂直对齐，不会出现布局错乱。方案1更适配复杂内容的垂直对齐场景，方案2更简洁，适合简单布局需求。

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