使用.row包裹.col-并让.card作为.col-的直接子元素才能实现真正响应式；漏写.row会导致卡片垂直堆叠；加h-100到.card或用row-cols-*可统一高度；图片需为.card直接子元素并加.card-img-top和.img-fluid；动态生成推荐createelement而非innerhtml拼接；viewport meta标签不可或缺。
直接用 .row 包裹带断点的 .col-*，再把 .card 作为 .col-* 的**直接子元素**，就能实现真正响应式——不是靠 .card 自己“变”，是栅格系统在背后算宽度和换行。
为什么卡片不换行、堆成一列？
大概率漏了 .row 容器。Bootstrap 栅格依赖 display: flex 和负边距来抵消列内 padding，没 .row，.col-* 就退化成普通块级元素，垂直堆叠。
- 检查 DOM 结构：必须是
<div class="row"><div class="col-md-4"><div class="card">...</div></div></div> - 别把
.col-*直接丢进或<main></main>里 - 如果用了 Bootstrap 4.3 及更早版本，确认没误用
g-3（该类从 4.6 才支持）
怎么让同一行的卡片高度一致？
h-100 必须加在 .card 上，不是 .card-body，且前提是父级 .col-* 有高度上下文（.row 默认提供）。
- 标题长短不一、图片缺失、描述行数不同，都会导致“楼梯状”错位
- 加
h-100后，.card会撑满所在列高度，视觉对齐 - 更稳方案（BS5+）：直接给
.row加row-cols-2 row-cols-md-3，它自动设 flex 并强制等高，比单个h-100更少出错 - 千万别写
min-height: 300px—— 小屏下留大片空白，大屏下又可能截断内容
图片溢出、文字贴边、标题折行怎么办？
这些不是样式没调好，是语义结构没走对路径。
- 图片必须是
.card的**直接子元素**，并加.card-img-top+.img-fluid；只写<img>不加类，图片不会响应式缩放 - 标题用
<h5 class="card-title"></h5>，别用普通<h5></h5>或<p></p>替代 - 长标题加
text-truncate防止折行破坏卡片高度一致性 - 正文段落必须包在
.card-text里，否则默认 margin-bottom 可能被重置为 0 - 删掉所有手写的
margin/padding，改用m-2、pb-3、pt-md-0这类工具类
动态生成卡片时容易踩什么坑？
拼 HTML 字符串（innerHTML += '...' ）看着快，实际埋雷最多。
- XSS 风险：没做转义，API 返回的文本含
<script></script>就执行了 - class 写错不报错，比如
card-bdoy拼错，渲染出来就塌陷，但控制台没提示 - 无法按条件开关 class：比如有的卡有图、有的没有，字符串拼接只能硬写两套模板；而
element.classList.toggle('card-img-top', hasImage)可精确控制 - 推荐做法：用
document.createElement('div')创建.card，再用appendChild逐层塞内容，结构清晰、可调试、易维护
最常被忽略的一点：viewport meta 标签必须存在，<meta name="viewport" content="width=device-width, initial-scale=1"> 缺了它，所有 sm/md 断点都失效，卡片永远单列——不是代码错，是浏览器根本没开启响应式模式。
