本文介绍如何在 bootstrap 中实现标题列与值列的垂直对齐，避免因内容高度不一致导致的视觉错位问题，提供纯 html/css 的“行拆分法”和动态高度同步的 javascript 方案。
本文介绍如何在 bootstrap 中实现标题列与值列的垂直对齐，避免因内容高度不一致导致的视觉错位问题，提供纯 html/css 的“行拆分法”和动态高度同步的 javascript 方案。
在使用 Bootstrap 构建数据展示布局时，一个常见但易被忽视的问题是：当采用传统的四列（col-md-3）并排结构时，若某列中内容高度显著增加（如长文本、多行值），会导致其对应标题无法自然对齐——例如“Title2”始终固定在第二行起始位置，而“Value2”因换行占据多行后，“Title3”却仍紧随其后出现在同一列底部，破坏了语义配对关系。
根本原因在于 Bootstrap 的栅格系统按列（column）流式布局，而非按行（row）逻辑分组。因此，要实现“标题–值”严格垂直对齐，必须让每一对（或每一组）关联内容共享同一行上下文。
✅ 推荐方案一：语义化行拆分（零 JS，响应式原生）
将原本单个 .row 内的四列结构，重构为多个独立 .row，每行承载一组逻辑相关的标题与值。这样每一行内的四个 col-md-3 元素天然等高（由 Flexbox 默认 align-items: stretch 保证），且语义清晰、无需脚本、完全响应式。
<div class="container">
<div class="row">
<p class="col-md-3 mb-0">Title1:</p>
<p class="col-md-3 mb-0">Value1</p>
<p class="col-md-3 mb-0">Title4</p>
<p class="col-md-3 mb-0">Value4</p>
</div>
<div class="row">
<p class="col-md-3 mb-0">Title2:</p>
<p class="col-md-3 mb-0">Value2 Value2 Value2 Value2 Value2 Value2 Value2 Value2</p>
<p class="col-md-3 mb-0">Title5</p>
<p class="col-md-3 mb-0">Value5</p>
</div>
<div class="row">
<p class="col-md-3 mb-0">Title3:</p>
<p class="col-md-3 mb-0">Value3</p>
<p class="col-md-3 mb-0">Title6</p>
<p class="col-md-3 mb-0">Value6</p>
</div>
<div class="row">
<p class="col-md-3 mb-0">—</p>
<p class="col-md-3 mb-0">—</p>
<p class="col-md-3 mb-0">Title7</p>
<p class="col-md-3 mb-0">Value7</p>
</div>
<div class="row">
<p class="col-md-3 mb-0">—</p>
<p class="col-md-3 mb-0">—</p>
<p class="col-md-3 mb-0">Title8</p>
<p class="col-md-3 mb-0">Value8</p>
</div>
</div>✅ 优势：语义正确、SEO 友好、移动端自动堆叠（col-md-3 在 ⚠️ 注意：需确保每行内各列内容逻辑成对；空位建议用 — 或 — 占位，避免 DOM 结构断裂。
⚙️ 备选方案二：JavaScript 动态等高（保留原始结构）
若受遗留代码、CMS 模板或服务端渲染限制，无法重构 DOM 结构，可采用 JS 动态计算并统一每组关联元素的高度：
<div class="container">
<div class="row">
<!-- Column 1 -->
<div class="col-md-3">
<p class="row-1">Title1:</p>
<p class="row-2">Title2:</p>
<p class="row-3">Title3:</p>
<p class="row-4">Title4:</p>
</div>
<!-- Column 2 -->
<div class="col-md-3">
<p class="row-1">Value1</p>
<p class="row-2">Value2 Value2 Value2 Value2 Value2 Value2 Value2 Value2</p>
<p class="row-3">Value3</p>
<p class="row-4">Value4</p>
</div>
<!-- Column 3 -->
<div class="col-md-3">
<p class="row-1">Title4</p>
<p class="row-2">Title5</p>
<p class="row-3">Title6</p>
<p class="row-4">Title7</p>
<p class="row-5">Title8</p>
</div>
<!-- Column 4 -->
<div class="col-md-3">
<p class="row-1">Value4</p>
<p class="row-2">Value5</p>
<p class="row-3">Value6</p>
<p class="row-4">Value7</p>
<p class="row-5">Value8</p>
</div>
</div>
</div>
<script>
// 按行号分组并同步高度
const maxRow = 5;
for (let i = 1; i <= maxRow; i++) {
const elements = document.querySelectorAll(`.row-${i}`);
if (elements.length === 0) continue;
const heights = Array.from(elements).map(el => el.offsetHeight);
const maxHeight = Math.max(...heights);
elements.forEach(el => {
el.style.height = `${maxHeight}px`;
el.style.overflow = 'hidden'; // 防止内容溢出破坏布局
});
}
</script>✅ 适用场景：需最小化 HTML 变更、兼容复杂模板引擎。
⚠️ 注意事项：
- 必须在 DOM 加载完成后执行（推荐放入 DOMContentLoaded 或 <script> 放在 </script>
