本文介绍如何利用 Bootstrap 的 Flexbox 工具类（如 align-items-stretch、h-100 和 mb-0）让 <input> 与同级 .alert 元素在栅格行中自动保持一致高度，无需硬编码高度值，确保响应式与可维护性。
本文介绍如何利用 bootstrap 的 flexbox 工具类（如 `align-items-stretch`、`h-100` 和 `mb-0`）让 `` 与同级 `.alert` 元素在栅格行中自动保持一致高度，无需硬编码高度值，确保响应式与可维护性。
在 Bootstrap 表单布局中，常见需求是让输入框（<input class="form-control">）与右侧的验证提示（如 .alert.alert-danger）视觉上等高对齐。但默认情况下，.alert 自带上下 margin 和 padding，而 .form-control 高度由内边距和字体大小决定，二者天然不一致——单纯添加 col-* 类或调整 margin 并不能解决根本问题。
核心解决方案基于 Bootstrap 5+ 的 Flexbox 布局机制：
- 将 .row 设置为 align-items-stretch（默认即 stretch，但显式声明更清晰），使所有子列（<div class="col-*">）在交叉轴（垂直方向）上拉伸至容器最大高度；
- 在输入框外层 <div class="col-5"> 内，为 <input> 添加 h-100，使其 100% 占满父容器高度；
- 为 .alert 移除底部外边距（mb-0），并酌情减小垂直内边距（如 py-1），避免其内容撑开整体高度，同时保留视觉可读性。
以下是优化后的完整代码示例：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
<div class="container-fluid">
<div class="mb-3 row align-items-stretch">
<label for="inputCompanyName" class="col-form-label col-2">Company :</label>
<div class="col-5">
<input type="text" class="form-control h-100" id="inputCompanyName"
placeholder="" formControlName="companyName" />
</div>
<div class="col-4 alert alert-danger mb-0 py-1" role="alert"
*ngIf="companyNameVal.errors?.['required'] && companyNameVal.touched">
Company name is required!
</div>
</div>
</div>✅ 关键要点说明：
- align-items-stretch 作用于 .row（Flex 容器），是实现等高对齐的基础；
- h-100 必须加在 <input> 上（而非其父 col-5），因为 .form-control 默认是 display: block，需显式继承高度；
- mb-0 消除 .alert 默认的 margin-bottom: 1rem，防止其额外增加行高；
- py-1（即 padding-top: 0.25rem; padding-bottom: 0.25rem）在保持可读性的前提下压缩高度，可根据设计规范替换为 py-0 或 py-2；
- 此方案完全响应式：当屏幕尺寸变化导致 .row 高度动态调整时，输入框与警告框仍自动同步，无需 JS 或媒体查询干预。
⚠️ 注意事项：
- 若项目使用 Bootstrap 4，请确认已启用 Flexbox 支持（v4.1+ 默认开启），且 align-items-stretch 类名可用；
- 避免对 .alert 设置固定 height 或 line-height，否则会破坏文本自适应与多语言支持；
- 如需在 .alert 中显示多行提示，建议改用 small 标签或自定义 CSS 控制行高，而非依赖高度强制截断。
通过合理组合 Bootstrap 内置的 Flex 工具类，开发者可零配置实现健壮、语义清晰且易于维护的高度对齐效果——这正是现代 CSS 布局优于传统 hack 方案的核心优势。
