Bootstrap 4 Flexbox布局下.row子元素高度不一致问题求解

这个问题其实是因为你给右侧列加的flex-center类可能覆盖了Bootstrap默认的等高行为，我来帮你拆解一下：

问题原因 #

Bootstrap 4的.row本身就是flex容器，它默认设置了align-items: stretch——这意味着所有子列（.col-*元素）会自动拉伸到和最高的子元素保持等高。但如果你的自定义flex-center类里包含了align-self: center这类属性，它会单独给右侧列设置对齐方式，让这个列只适配自身内容的高度，破坏了默认的等高效果。

快速解决方案 #

你不需要修改太多代码，只需要把右侧列的内容居中逻辑调整一下，用Bootstrap内置的flex工具类来实现内部内容居中，同时保持列本身的高度拉伸：

修改后的完整代码：

<div class="row mb-0 pb-0" style="border:1px solid red;">
  <div class="col-sm-8 mb-0 pb-0" style="border:1px solid blue;">
    <div class="md-form mt-4">
      <textarea type="text" id="objetivo_especifico" class="md-textarea form-control" formControlName="objetivo_especifico"></textarea>
      <label for="objetivo_especifico">Objetivo Específico</label>
    </div>
  </div>
  <div class="col-sm-4 d-flex align-items-center justify-content-center" style="border:1px solid blue;">
    <a class="m-0 btn-pin waves-light animated mr-8 bola_roja p-0" >Holi </a>
  </div>
</div>

关键调整点 #

1. 移除了可能导致高度异常的自定义flex-center类，改用Bootstrap自带的工具类：
   • d-flex：让列内部变成flex容器
   • align-items-center：垂直居中内部内容
   • justify-content-center：水平居中内部内容
2. 保留了.row的默认flex行为，这样两个列会自动保持等高

如果你的flex-center是需要复用的自定义类，也可以修改它的样式，去掉align-self: center这类影响列高度的属性，只保留内部内容居中的逻辑：

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 不要添加 align-self: center; 这类会破坏等高的属性 */
}

这样调整后，右侧列就会和左侧列保持完全等高，同时内部的按钮也能正常居中显示啦。

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