Bootstrap 5 的 col 类不支持 min-height 响应式控制；需自定义媒体查询类（如 min-h-md-200）或使用内置 min-vh-100，配合 html/body、.row、.col 的高度链（d-flex + h-100）才能生效。
Bootstrap 5 的 col 类根本不支持 min-height 响应式控制
别在 col-md-6 后面硬加 min-h-md-200 或 min-height: 200px —— Bootstrap 5 官方 CSS 中压根没定义这类响应式高度工具类。你看到的类似写法，要么是项目自己用 Sass 扩展的，要么是第三方插件注入的。col 系列类只管宽度、顺序、可见性和对齐，高度行为完全交由标准 CSS 盒模型决定：内容撑多高，它就多高。
常见错误现象包括：
-
<div class="col-md-6 min-h-100">完全无效（min-h-100不是 Bootstrap 5 内置类） - 写了
min-height: 100vh却没效果，因为父级（如.row、.container、body）没提供可参照的高度上下文 - 用
h-100替代，结果列高度为 0（因父容器无显式高度，height: 100%计算为 0）
想让某列在特定断点下有最小高度？必须手动写媒体查询类
最稳妥、可维护的做法是定义自己的响应式工具类，比如 min-h-md-200，并在对应断点启用。不要改 Bootstrap 源码，把它加进项目专属的 _custom.scss 或 _utilities.scss 里：
@include media-breakpoint-up(md) {
.min-h-md-200 {
min-height: 200px;
}
}
然后在 HTML 中直接使用：
<div class="col-md-6 min-h-md-200">内容</div>
关键细节：
- 断点值必须严格匹配 Bootstrap 的 Sass 变量（如
$breakpoint-md: 768px），手写@media (min-width: 767px)会导致临界失效 - 类名语义要清晰：
min-h-表示最小高度，md-表示从 md 断点起生效，200是像素值（也可换成vh、rem） - 如果只用 CDN（没编译 Sass），那就只能内联
style="min-height: 200px;"，但这样无法响应断点，且上线前必须清理
min-vh-100 是视口级最小高度的正解，但必须配对使用
如果你的真实目标是“列至少占满一屏高”，min-vh-100 是 Bootstrap 5+ 内置的正确工具类，它等价于 min-height: 100vh，且内容超出时自动撑高，不会锁死导致截断或 Safari 地址栏缩放跳变。
但它不是贴上就灵——必须满足三个前提：
-
html和body必须设min-height: 100%且清除默认margin -
.row必须是 Flex 容器（加d-flex），否则.col的min-vh-*失去拉伸参照 -
.col本身不能有height、flex-shrink: 0或align-self: flex-start这类干扰align-items: stretch的样式
典型结构：
<div class="row d-flex"> <div class="col-md-6 min-vh-100">内容</div> <div class="col-md-6 min-vh-100">内容</div> </div>
图片/卡片等高场景，别设列高，改用 d-flex + h-100 链路
如果你发现列里放了 .card 或 <img>，但高度参差不齐，问题往往不在列本身，而在子元素没继承高度。单纯给 .col 设 min-height 解决不了内部卡片不等高的问题。
真正有效的做法是向下传递高度上下文：
- 给
.col加d-flex h-100（激活 flex 并拉满高度） - 给
.card或其内容区（如.card-body）也加h-100 - 图片需放在
d-flex h-100的直接父容器里，并配合object-fit: cover和w-100 h-100 - 避免在
.col上写style="height: 100%"—— 百分比高度依赖父级有显式高度，而.row默认没有
一句话收尾：最小高度不是靠“列”来设的，而是靠“高度链”来传的。漏掉 html/body、.row 或 .col 任意一层的 flex 或高度声明，都会让整个链路失效。
