别用card-deck，它在bootstrap 5中已被移除；应使用row+col布局，通过col-12 col-sm-6 col-md-4等断点类实现响应式卡片流，配合h-100或row-cols-*确保等高对齐。
用 card-deck 还是 row + col？
直接说结论：别用 card-deck，它在 Bootstrap 5 中已被移除，Bootstrap 4 里也存在等高、断点不灵活、响应式行为僵硬等问题。真正可控的方式是 row 套 col，靠栅格系统驱动换行和宽度。
常见错误是复制旧教程里的 card-deck，结果在 BS5 页面上卡片堆成一列、样式丢失，或者在小屏下仍强行并排导致水平滚动。
-
row提供负边距清除父容器 padding，col自动处理内边距和断点适配 - 每个
col内放一个card，就能自然实现“多列→单列”的响应式流动 - BS5 默认支持
col-12 col-sm-6 col-md-4 col-lg-3这类写法，无需额外 CSS
怎么让卡片在小屏堆叠、中屏两列、大屏三列？
关键不是写死列数，而是按视口宽度分层控制 col 的 class。BS 的栅格类本质是 CSS 媒体查询的封装，直接写对了就生效。
典型场景：新闻卡片列表、商品展示页——需要在移动端竖排（1 列），平板横屏时双列（2 列），桌面端三列或四列。
- 移动端默认
col-12（占满整行） - ≥576px（
sm）用col-sm-6→ 每行最多 2 张 - ≥768px（
md）用col-md-4→ 每行最多 3 张 - ≥992px（
lg）可用col-lg-3→ 每行最多 4 张，但注意内容是否撑得开
示例结构：
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card">...</div>
</div>
<!-- 更多卡片 -->
</div>
卡片高度不一致导致布局错位怎么办？
这是最常被忽略的视觉问题：标题长短不同、图片缺失、描述行数不一，会让 row 里的卡片上下不对齐，形成“楼梯状”。
原因在于 col 只管宽度和换行，不管内部高度；而 card 默认是内容高度自适应。
- 简单方案：给所有
card加h-100类，再确保父col有高度上下文（row默认没问题） - 更稳方案：在
row上加row-cols-1 row-cols-sm-2 row-cols-md-3—— 这是 BS5 新增的“列数控制类”，会自动为每列设置flex并强制等高 - 避免用
min-height硬设像素值，不同设备字体缩放、行高差异会导致截断或留白过大
为什么加了 col 还是不换行？
大概率是漏掉了 row 容器，或者把 col 直接丢在 container 或 body 下。
BS 栅格依赖 flex 布局，而 row 的核心作用就是设 display: flex 和负边距。没有它，col 的 flex 行为不会触发，只会退化成普通块级元素，挨个垂直堆叠。
- 检查是否写了
<div class="row"> 包裹所有 <code>col - 确认没在
col上误加float、display: block等覆盖性样式 - 用浏览器 DevTools 看
col元素是否计算出flex: 0 0 auto和正确max-width
复杂点往往藏在嵌套里：比如卡片内部又用了 row，但忘了关掉父级 col 的 overflow: hidden（某些定制主题会加），导致子 row 的负边距被裁掉。
