bootstrap 5 中无法直接用 col 类设置最小高度，因其栅格类不提供响应式 min-height 工具类（如 min-h-md-100 不存在）；需通过自定义媒体查询类、内联 style 或 flex 布局（如 d-flex + 子元素设 min-height）实现。
Bootstrap 5 中无法直接用 col 类设置最小高度
Bootstrap 的栅格系统（col、col-md 等）本身不提供类似 min-height 的内置类。它只控制宽度、顺序、对齐和可见性，高度相关行为完全由 CSS 盒模型决定——也就是说，col 元素默认是内容撑开的，不会自动拉伸或限制最小高度。
常见错误是试图写 <div class="col-md-6 min-h-100">，但 Bootstrap 5 默认不带 <code>min-h- 工具类（除非你启用了 height 插件并自定义了响应式高度工具类）。
- Bootstrap 5 默认仅提供
h-25、h-50、h-75、h-100和h-auto，且这些是固定高度，不响应断点（即没有h-md-100这种写法） -
min-h-类在官方 v5.3+ 中仍未内置；若看到有人用，大概率是自己通过 Sass 变量扩展或引入了第三方插件 - 想在
md断点及以上才生效？必须手动写媒体查询或用 CSS 自定义类
推荐做法：用自定义响应式类配合 min-height
最稳妥、可维护的方式是定义自己的工具类，比如 min-h-md-200，并在对应断点启用：
@include media-breakpoint-up(md) {
.min-h-md-200 {
min-height: 200px;
}
}
然后在 HTML 中使用：
<div class="col-md-6 min-h-md-200">内容</div>
- 类名语义清晰：
min-h-表示最小高度，md-表示从 md 断点起生效，200是像素值（也可换成vh、rem等） - 避免污染全局样式：建议放在项目专属的
_utilities.scss或custom.scss中，而非直接改 Bootstrap 源码 - 如果用的是 Bootstrap CDN（未编译 Sass），那就只能内联 style 或加
<style></style>块，例如：<div class="col-md-6" style="min-height: 200px;"> —— 但这样无法响应断点<h3>替代方案：用 Flexbox 容器 + <code>flex-fill或h-100如果你的真实目标是让多个
col在同一行中“等高”，而不是单纯设最小高度，那更合理的解法是利用 Flex 布局特性：<div class="row g-3"> <div class="col-md-6 d-flex"> <div class="w-100 bg-light" style="min-height: 150px;">内容</div> </div> <div class="col-md-6 d-flex"> <div class="w-100 bg-dark text-white" style="min-height: 150px;">内容</div> </div> </div>-
d-flex让col成为 flex 容器，内部子元素才能受min-height控制（否则min-height在col上常被忽略，因它默认是 block 且无高度约束） - 不要直接给
col加min-height，而是给它的子元素加——这是最容易被忽略的 DOM 层级问题 - 若需严格等高，可考虑
row加g-0+ 子元素加h-100，再配合min-height覆盖
注意 Safari 和旧版 Chrome 对
min-height+ Flex 的兼容细节在部分 Safari 版本（尤其是 iOS 15.4 之前）和老 Chrome（min-height 在 flex 子项上可能失效，表现为高度塌陷。此时需要补一个
flex-shrink: 0或显式设置height: auto：.min-h-md-200 { min-height: 200px; } @include media-breakpoint-up(md) { .min-h-md-200 { min-height: 200px; flex-shrink: 0; /* 关键补丁 */ } }- 这不是 Bootstrap 的 bug，而是 CSS Flex 规范在不同引擎中的实现差异
- 仅当观察到实际渲染异常时才需加此补丁，不要无脑添加
- 测试时务必真机检查 iOS Safari，模拟器有时不复现
实际项目里，绝大多数情况只需要第一种自定义类方案就够了。真正麻烦的不是怎么写，而是忘记
col本身不处理高度、以及没把min-height落在正确的 DOM 层级上。 -
