height: 100% 在 bootstrap 栅格中失效，是因为 .row 默认无明确高度且需父容器设高才能生效；bootstrap 4/5 虽默认 flex 布局，但若 .row 的 display 被覆盖或降级为 float，则 align-items: stretch 失效，需确保 .row 为 flex 容器并清除干扰样式。
为什么 height: 100% 在 Bootstrap 栅格里不管用
因为 Bootstrap 的 .row 默认是 display: block，子项 .col-* 是浮动或 flex 项目（取决于版本），height: 100% 需要父容器有明确高度，而 .row 高度由内容撑开——这就陷入死循环：等高需要高度，高度又依赖等高。
常见错误现象：min-height: 100vh 加在列上只让单列拉伸，相邻列不响应；用 align-items: stretch 却发现没生效，其实是父容器没设成 display: flex。
- Bootstrap 4/5 默认启用 Flexbox grid，
.row实际是display: flex，但仅当它没被其他样式覆盖时才有效 - 如果用了
.row.no-gutters或自定义 CSS 重置了display，align-items: stretch就失效 - IE11 对 Flex 等高支持不完整，
align-items: stretch可能被忽略
用 align-items: stretch + 确保 .row 是 flex 容器
这是最轻量、原生的解法，不需要额外 class 或 JS。前提是确认你的 Bootstrap 版本和实际渲染的 .row 确实是 flex 布局。
检查方式：浏览器开发者工具中看 .row 的 computed display 是否为 flex。如果不是，可能是被重写或降级到了 float 模式。
- Bootstrap 4+ 默认开启 flex grid，只要没显式加
flex-column或覆盖display就可用 - 确保列没有设置
height、max-height或position: absolute，这些会破坏 stretch 行为 - 若列内有
margin-bottom: auto或margin-top: auto，可能干扰对齐，优先移除测试
.row {
display: flex; /* 强制确保 */
align-items: stretch;
}
<p>/<em> 列无需额外样式，保持默认 </em>/
.col-6 { /<em> 自动等高 </em>/ }</p>
用 min-height + display: flex 手动包裹（兼容旧版或复杂嵌套）
当 .row 被第三方样式污染，或需要精确控制某几列等高（而非整行），就绕过 .row，用一个干净的 flex 容器包住目标列。
典型场景：侧边栏 + 主内容区，但它们不在同一 .row 里；或者某列含卡片组件，需卡片底部对齐。
- 不要直接给
.col-*设height: 100%，而是用min-height: 100%配合父级display: flex - 若父容器高度不确定，可结合
vh单位，例如min-height: calc(100vh - 80px)（减去 header 高度） - 避免在 flex 容器里混用
float或inline-block子元素，会导致 layout 崩溃
<div class="d-flex"> <div class="col-4">左侧栏</div> <div class="col-8">主内容</div> </div>
避免用 JS 计算高度——除非真要像素级对齐
很多老教程用 jQuery 遍历列、取 outerHeight()、再设 height，这在响应式页面里极易出错：窗口 resize、动态加载内容、字体加载延迟都会导致高度错乱。
现代 CSS 已足够解决绝大多数等高需求，JS 方案应作为兜底，而非首选。
- 如果必须用 JS，监听
resize和DOMContentLoaded，并用ResizeObserver替代window.onresize - 避免对
.col-*直接写style.height，改用 class 切换（如.equal-height-320），便于 CSS 控制 - 注意 SSR 或 hydration 时机：React/Vue 中要在 DOM 挂载后执行，否则取不到真实高度
真正容易被忽略的是内容溢出处理：等高后，短列里的文字若超长，overflow: hidden 或 text-overflow: ellipsis 得手动加，否则布局会撑破或文字溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
