Bootstrap中d-flex实现row内col同高不生效如何解决

Bootstrap 原生的.row类默认就带display: flex属性，额外添加d-flex属于冗余写法。你代码中给row添加的align-items-center是导致同高失效的核心原因：flex布局默认的交叉轴对齐规则是align-items: stretch，也就是子元素自动拉伸填满父容器高度，这本身就是实现同高列的原生逻辑，而align-items: center会覆盖这个规则，让所有列按自身内容高度居中对齐，自然无法实现等高效果。
另外你给row设置的h-100（高度100%）需要所有父级DOM元素都配置明确高度，否则百分比高度计算会失效。

• 移除row上破坏拉伸逻辑的align-items-center类，去掉冗余的d-flex类，仅保留需要的布局类
• 给每一列的.ce-login__col添加d-flex类，给列内部的.ce-registration__form添加w-100 h-100类，避免出现列本身等高、但内部表单块高度不一致的视觉问题
• 若h-100未生效，逐层排查row的所有父级元素（外层容器、body等），确保每一层都设置了明确高度值；如果需要列内内容垂直居中，给对应列单独加align-items-center即可，不要加在row上影响全局拉伸规则

修复后的完整代码：

<div class="row justify-content-center h-100">
   <div class="col-12 col-md-6 col-xxl-4 ce-login__col d-flex">
      <div class="ce-registration__form w-100 h-100">
        <form id="" class="">
            <div class="ce-registration__form__top"></div>
            <div class="ce-registration__form__bottom"></div>
        </form>
      </div>
   </div>
   <div class="col-12 col-md-6 col-xxl-4 ce-login__col d-flex">
      <div class="ce-registration__form w-100 h-100">
        <form id="" class="">
            <div class="ce-registration__form__top"></div>
            <div class="ce-registration__form__bottom"></div>
        </form>
      </div>
   </div>
</div>

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