Bootstrap CSS三列垂直对齐：实现标题等高、段落起始对齐

开发者阿泽

2026-5-26

嘿，这个需求用现代CSS布局就能完美解决，完全不用依赖死板的min-height！给你两个最实用的方案，自适应还易维护：

方案1：Flexbox 垂直布局（推荐）

把每一列变成垂直方向的Flex容器，让标题自动拉伸到和最长标题一致的高度，段落自然就对齐了：

/* 给每一列设置垂直Flex布局 */
.col-lg-4 {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 可选，给标题和段落加间距 */
}

/* 让标题占据列内的可用空间，自动匹配最高标题高度 */
.col-lg-4 h2 {
  flex: 1;
  /* 可选：如果想让短标题的文字垂直居中，加上下面这两行 */
  display: flex;
  align-items: center;
}

原理很简单：每个列是垂直Flex容器后，flex:1会让标题区域自动填充列内的剩余空间，所有列的标题高度会统一为最高的那个标题的高度，段落自然就从同一水平线开始了。

方案2：CSS Grid 网格布局

用Grid把整个行和列都结构化，让标题和段落分别占据固定的网格行，实现高度统一：

/* 把行变成三列网格 */
.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; /* 列之间的间距 */
}

/* 每个列内部分成两行：标题行自适应高度，段落行占剩余空间 */
.col-lg-4 {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
}

这个方案更直观，把每个列的标题和段落分别放在网格的两行里，所有列的标题行高度会自动对齐到最高的那个，段落自然就齐平了。