Bootstrap中Alert与Input高度对齐问题求助

要让Alert组件和Input输入框高度一致，核心是调整Alert的内边距并确保文字垂直居中，利用Bootstrap工具类即可实现。修改后的代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <div class="mb-3 row align-items-center">
    <label for="inputCompanyName" class="col-form-label col-2">Company :</label>
    <div class="col-5">
      <input type="text" class="form-control" id="inputCompanyName" placeholder="" formControlName="companyName" />
    </div>

    <div class="col-4 alert alert-danger d-flex align-items-center p-2" role="alert" *ngIf="companyNameVal.errors?.['required'] && companyNameVal.touched">
      Company name is required!
    </div>
  </div>
</div>

关键修改说明： #

• 给外层row添加align-items-center：确保行内所有列的内容垂直居中对齐。
• 给Alert添加d-flex align-items-center：让Alert内的提示文字垂直居中，避免调整内边距后文字位置偏移。
• 给Alert添加p-2：减小Alert的上下内边距，使其高度与form-control输入框匹配（form-control默认内边距为0.375rem 0.75rem，p-2对应0.5rem内边距，高度基本一致）。

如果需要更精确的高度匹配，可替换p-2为py-1 px-3，完全对齐form-control的内边距：

<div class="col-4 alert alert-danger d-flex align-items-center py-1 px-3" role="alert" *ngIf="companyNameVal.errors?.['required'] && companyNameVal.touched">
  Company name is required!
</div>

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