如何在Bootstrap中实现响应式的两栏等高布局

作者：袖梨 2026-07-31

如何在Bootstrap中实现响应式的两栏等高布局并不只看表面做法，关键还要理解相关条件、限制和后续影响。

用 row + col 配合 align-items-stretch 是最稳的方案：row 默认 display: flex 但 align-items 为 normal，需显式加 align-items-stretch 类；删掉 col 内 height:100% 等干扰样式；h-100 应加在 col 内部卡片等容器上而非 col 自身。

用 row + col 配合 align-items-stretch 是最稳的方案

Bootstrap 5 默认就支持等高列，但前提是父容器是 flex 布局且未被覆盖。很多人直接套 row 和 col 却发现两栏高度不一致，问题往往出在父级 row 没有正确触发 flex 对齐行为。

row 默认是 display: flex，但它的 align-items 默认值是 normal（不是 stretch），需显式加 align-items-stretch 类
如果列里用了 height: 100% 或 min-height，反而可能破坏 flex 的自然拉伸逻辑，建议删掉
避免在 col 内部再嵌套 row 后忘记重置对齐方式——子 row 不继承父级 align-items

示例：

<div class="row align-items-stretch">  <div class="col-md-6">内容短</div>  <div class="col-md-6">内容很长，会撑开整行高度</div></div>

当内容含图片或卡片时，h-100 必须加在每列内部容器上

单纯给 col 加 h-100 没用，因为 col 本身是 flex item，高度由内容决定；真正需要等高的，是它内部的卡片、div.card 这类块级容器。

常见错误：只写 <div class="col"><div class="card">.../div>，没给 card 加 h-100
响应式场景下，h-100 在移动端可能让卡片过高，此时应配合 d-md-flex 或媒体查询控制
如果卡片内有 img-fluid，记得设 object-fit: cover 或固定宽高比，否则图片拉伸会导致高度不一致

正确写法：

<div class="row align-items-stretch">  <div class="col-md-6">    <div class="card h-100">...</div>  </div>  <div class="col-md-6">    <div class="card h-100">...</div>  </div></div>

遇到 min-height 或 padding 导致错位，优先检查 box-sizing

Bootstrap 的 col 默认用 box-sizing: border-box，但如果你在内部元素上手动加了 padding 或 border，又没配好 height 计算方式，两栏实际渲染高度就会差几个像素。

所有参与等高的容器（包括 card-body、container）都应确保 box-sizing: border-box 生效
避免在 col 上直接设 padding，改用 Bootstrap 的间距工具类如 p-3、py-md-4
如果用了自定义 CSS 设置 min-height，务必确认它和 flex 的 stretch 行为不冲突——flex 会优先满足 min-height，但不会强制压缩内容

IE11 兼容性下不能依赖 align-items-stretch

IE11 对 flex 的 align-items: stretch 支持不稳定，尤其当列中存在 position: absolute 或 transform 元素时，等高会失效。

必须降级方案：用 table-cell 布局，即 class="d-table" + d-table-cell，但会丢失响应式断点控制
更现实的做法是放弃 IE11 下的严格等高，用 JS 补丁（如 matchHeight 库），仅在 document.readyState === 'complete' 后执行
注意 matchHeight 的 selector 要精确匹配到真实内容容器，而不是 col —— 否则动态加载内容后需手动调用 $.matchHeight._update()