Bootstrap Card等高布局默认不生效，因.card未处于Flex容器中；v4/v5废弃.card-deck，v5.3+彻底移除；需在.card直接父元素加d-flex并给.card加h-100，或改用5.3+的grid布局。
Card等高布局为什么默认不生效
Bootstrap的.card在默认流式布局下各自按内容撑高，不会自动对齐——这不是Bug，是CSS Flexbox未被激活的表现。v4/v5中.card-deck已废弃，v5.3+彻底移除，依赖它会直接失效或报错Unknown pseudo-class selector ".card-deck"。
常见错误现象：.row > .col > .card结构里，卡片高度参差不齐，尤其当标题行数、图片尺寸、文本长度不一致时更明显。
- 根本原因是父容器（如
.row）未启用Flex布局，子项.card仍是块级元素独立计算高度 - Bootstrap 4/5 默认
.row是display: flex，但仅当子元素为.col时才触发交叉轴对齐；.card本身不是Flex子项，不直接受align-items控制 - 必须让
.card的**直接父容器**成为Flex容器，并设align-items: stretch（这是默认值，但需确保无覆盖）
用d-flex + h-100组合强制等高
最稳定、兼容性最好的方式：在.card的直接父元素上加d-flex，同时给.card加h-100，让卡片拉满父容器高度。
使用场景：网格布局（如.row > .col > .card）、单列多卡、响应式卡片组。
-
.col本身不是Flex容器，所以不能只靠.row——必须把.col变成d-flex -
h-100依赖父级有明确高度，而.col默认高度由内容决定；因此需确保.col的父级（如.row）能提供“参考高度”，通常靠内容或min-height兜底 - 若卡片内有
.card-img-top，注意它默认object-fit: cover，可能裁剪；等高后图片视觉比例易失衡，建议统一设height或min-height
示例：
<div class="row">
<div class="col-md-4 d-flex">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">标题</h5>
<p class="card-text">内容...</p>
</div>
</div>
</div>
<!-- 其他col同理 -->
</div>Grid布局替代方案（Bootstrap 5.3+推荐）
Bootstrap 5.3起原生支持CSS Grid，用grid类比Flex更简洁，且天然等高。但要注意浏览器兼容性（IE11不支持）。
参数差异：grid类对应display: grid，g-cols-3等控制列数，gap-3控制间距；卡片无需h-100，Grid子项默认拉伸。
- 必须用
grid作为直接父容器，不能混用.row——否则Grid规则被Flex覆盖 -
g-cols-*类只在5.3+存在，旧版本无效；降级方案需回退到Flex写法 - Grid对卡片内
.card-footer位置更可控，Flex下容易因内容挤压导致footer错位
示例（5.3+）：
<div class="grid g-cols-3 gap-3"> <div class="card">...</div> <div class="card">...</div> <div class="card">...</div> </div>
JavaScript兜底：ResizeObserver监听动态内容
当卡片内容异步加载（如API返回图文）、字体加载延迟、或用户缩放页面时，纯CSS可能短暂失准。这时需要JS干预，但仅作补充，不替代CSS方案。
性能影响：频繁重排会触发重绘，ResizeObserver比scroll/resize事件更轻量，但需避免在每个卡片上单独实例化。
- 只观察
.card的直接父容器（如.col），拿到所有子.card高度后取最大值，再统一设min-height - 不要用
height硬设——会破坏响应式；用min-height保留弹性 - 首次执行后取消观察，除非卡片内容可能二次变化（如展开/收起）
简短示例：
const parent = document.querySelector('.col');
const cards = parent.querySelectorAll('.card');
const ro = new ResizeObserver(() => {
const maxHeight = Math.max(...Array.from(cards).map(c => c.offsetHeight));
cards.forEach(c => c.style.minHeight = <code>${maxHeight}px</code>);
});
ro.observe(parent);真正麻烦的是混合了图片懒加载、Web Font、以及第三方组件（如Vue/React动态渲染）的场景——CSS等高会在资源加载完成前闪动，这时候得结合font-display: swap、图片loading="eager"、以及JS的节流观察，缺一不可。
