不同.row里的.col默认不会垂直对齐，因每个.row是独立flex容器；解决方法是合并为一个.row并添加align-items-stretch类，或改用CSS Grid、JavaScript兜底。
不同 .row 里的 .col 默认不会垂直对齐
Bootstrap 的 .row 是独立的 flex 容器，彼此之间没有高度联动。如果你在两个相邻 .row 中放了高度不同的 .col（比如一个有图片、一个只有文字），它们的底边或顶边大概率错位——这不是 bug，是设计使然。
常见错误现象：col-6 文字块比 col-6 图片区矮，下一行的列从“参差不齐的底部”开始布局，视觉上像楼梯。
- 别指望靠
margin-bottom或height: 100%硬调：父级.row高度由内容撑开，子列无法继承“同一行基准线” - 避免用
align-items: stretch单独加在某个.row上——它只作用于本行内部，跨行无效 - 如果用了
flex-wrap: wrap（默认），换行后列更难对齐，优先考虑单行布局或重构结构
用 align-items: stretch + 统一父容器控制高度
真正起效的方式，是让多个 .row 共享同一个 flex 上下文，而不是各自为政。最稳妥的做法是**去掉中间的 .row 分隔，改用一个大 .row 包住所有需要对齐的列**。
例如：原本写成两行
<div class="row"> <div class="col-6">短文本</div> <div class="col-6">长文本+图片</div> </div> <div class="row"> <div class="col-6">另一组短文本</div> <div class="col-6">另一组长文本</div> </div>
改成：
<div class="row"> <div class="col-6">短文本</div> <div class="col-6">长文本+图片</div> <div class="col-6">另一组短文本</div> <div class="col-6">另一组长文本</div> </div>
再配合 Bootstrap 5 的 align-items-stretch 工具类（或自定义 CSS）即可强制等高：
<div class="row align-items-stretch">...</div>
用 CSS Grid 替代多行 Row 实现跨行对齐
当结构必须分多行（比如响应式断点下要重排顺序），.row 就不是最优解。CSS Grid 天然支持跨行对齐，且与 Bootstrap 并存无冲突。
做法是：放弃嵌套多个 .row，用一个 display: grid 容器 + grid-template-columns 模拟栅格行为：
<div class="my-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"> <div>短文本</div> <div>长文本+图片</div> <div>另一组短文本</div> <div>另一组长文本</div> </div>
关键点：
-
gap替代.row的margin和.col的padding - 响应式可用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) - Grid 不受 Bootstrap 的
.row高度限制，所有直接子元素自动按轨道对齐
用 JavaScript 强制同步高度（仅限动态内容）
当列内容完全不可控（如 CMS 输出的富文本、第三方组件嵌入），且无法修改 HTML 结构时，才考虑 JS 补救。注意：这是兜底方案，有性能和 SSR 兼容问题。
核心逻辑是按“列组”批量计算最大高度，再统一设值：
function syncColHeights(selector = '.col-same-height') {
const cols = document.querySelectorAll(selector);
if (cols.length === 0) return;
// 按每组 2 列分组（适配 col-6）
for (let i = 0; i < cols.length; i += 2) {
const group = Array.from(cols).slice(i, i + 2);
const maxHeight = Math.max(...group.map(el => el.scrollHeight));
group.forEach(el => el.style.height = maxHeight + 'px');
}
}
syncColHeights('.col-6');
容易踩的坑：
- 没考虑字体加载完成前的重排，建议在
font loaded后或DOMContentLoaded后执行 - 窗口缩放时不自动重算，需监听
resize并防抖 - 服务端渲染（SSR）页面首次加载时，JS 还未执行，用户会先看到错位状态
对齐这件事，本质是选择「结构可控性」还是「样式灵活性」。多数情况下，把多个 .row 合并成一个，并用 align-items-stretch，就已经解决 90% 的场景。非要拆成多行，就得接受它们天然不对齐——除非你主动用 Grid 或 JS 去打破这个前提。
