本文介绍如何在 bootstrap 中实现标题与对应值的垂直对齐，避免因内容高度不一致导致的视觉错位，重点讲解基于语义化行结构的纯 css 方案和动态等高适配的 javascript 补充方案。
本文介绍如何在 bootstrap 中实现标题与对应值的垂直对齐，避免因内容高度不一致导致的视觉错位，重点讲解基于语义化行结构的纯 css 方案和动态等高适配的 javascript 补充方案。
在使用 Bootstrap 构建响应式表单或数据展示布局时，一个常见痛点是：将标题（Label）与值（Value）分别置于左右两列（如 col-md-3），当某一行的值内容过长、自动换行导致高度增加时，其上方的标题却因固定位置无法“跟随”下移，造成视觉上的错行——例如“Title2”仍与“Value1”对齐，而实际应与“Value2”对齐。
根本原因在于：原始结构将逻辑上成对的标题-值强行拆分为列优先（column-based） 布局（4 列并排），违背了数据的行语义（row-based semantics）。Bootstrap 的栅格系统虽支持响应式断点（如 md），但无法自动协调跨列元素的垂直对齐关系。
✅ 推荐方案：重构为语义化行结构（Row-per-Item）
将每组标题-值视为独立逻辑行，每行内按需分配列宽。这样既保持响应式能力，又天然保证对齐：
<div class="container">
<div class="row align-items-center">
<p class="col-md-3 mb-0"><strong>Title1:</strong></p>
<p class="col-md-3 mb-0">Value1</p>
<p class="col-md-3 mb-0"><strong>Title5:</strong></p>
<p class="col-md-3 mb-0">Value5</p>
</div>
<div class="row align-items-center">
<p class="col-md-3 mb-0"><strong>Title2:</strong></p>
<p class="col-md-3 mb-0">Value2 Value2 Value2 Value2 Value2 Value2 Value2 Value2</p>
<p class="col-md-3 mb-0"><strong>Title6:</strong></p>
<p class="col-md-3 mb-0">Value6</p>
</div>
<div class="row align-items-center">
<p class="col-md-3 mb-0"><strong>Title3:</strong></p>
<p class="col-md-3 mb-0">Value3</p>
<p class="col-md-3 mb-0"><strong>Title7:</strong></p>
<p class="col-md-3 mb-0">Value7</p>
</div>
<div class="row align-items-center">
<p class="col-md-3 mb-0"><strong>Title4:</strong></p>
<p class="col-md-3 mb-0">Value4</p>
<p class="col-md-3 mb-0"><strong>Title8:</strong></p>
<p class="col-md-3 mb-0">Value8</p>
</div>
</div>? 关键优化说明：
- 每个 包含一组完整逻辑项（2 对标题-值），语义清晰；
- 使用 align-items-center 确保所有列内内容垂直居中，提升可读性；
- 添加 mb-0 移除
默认下边距，避免行高意外膨胀；
- 在小屏幕（如 xs）下，col-md-3 会自动堆叠为 100% 宽度，保持可读性，无需额外媒体查询。
⚠️ 备选方案：动态等高（JavaScript 辅助）
若受遗留结构限制无法重构 HTML，可通过 JS 计算每“逻辑行”内各列元素的最大高度，并统一设置：<div class="container"> <div class="row"> <div class="col-md-3"> <p class="row1 fw-bold">Title1:</p> <p class="row2 fw-bold">Title2:</p> <p class="row3 fw-bold">Title3:</p> <p class="row4 fw-bold">Title4:</p> </div> <div class="col-md-3"> <p class="row1">Value1</p> <p class="row2">Value2 Value2 Value2 Value2 Value2 Value2 Value2 Value2</p> <p class="row3">Value3</p> <p class="row4">Value4</p> </div> <div class="col-md-3"> <p class="row1 fw-bold">Title5:</p> <p class="row2 fw-bold">Title6:</p> <p class="row3 fw-bold">Title7:</p> <p class="row4 fw-bold">Title8:</p> </div> <div class="col-md-3"> <p class="row1">Value5</p> <p class="row2">Value6</p> <p class="row3">Value7</p> <p class="row4">Value8</p> </div> </div> </div> <script> // 按逻辑行分组（支持最多 5 行，可扩展） const rowClasses = ['row1', 'row2', 'row3', 'row4', 'row5']; rowClasses.forEach(rowClass => { const elements = document.querySelectorAll(`.${rowClass}`); if (elements.length === 0) return; const maxHeight = Math.max(...Array.from(elements).map(el => el.offsetHeight)); elements.forEach(el => el.style.height = `${maxHeight}px`); }); </script>? 注意事项：
- JavaScript 方案需确保 DOM 已加载完成（建议将脚本置于
