bootstrap卡片核心只需.card和.card-body两个类，图片须加.card-img-top/.card-img-bottom及.img-fluid，多卡片用.row+.col-*配合.h-100实现响应式等高布局。
直接用 .card + .card-body 就能出效果，别套多余容器
bootstrap 卡片不是靠一堆 div 堆出来的，核心就两个类：.card 是外框（带边框、圆角、阴影），.card-body 是内容区（负责内边距和文字流）。很多新手一上来就套 .container → .row → .col → 再塞 .card，结果发现卡片塌陷、间距错乱——其实单张卡片根本不需要网格。
常见错误现象：
– 卡片高度不一致，尤其文字行数不同；
– 图片溢出卡片宽度；
– 标题和文本贴边、没呼吸感。
- 单张卡片直接写：
<div class="card"><div class="card-body"> <h5 class="card-title">标题</h5> <p class="card-text">内容</p> </div></div> - 图片必须加
.card-img-top或.card-img-bottom，不能只放<img>标签——否则不会自动撑宽、也不响应式 - 如果想让卡片内容垂直居中（比如图标+文字组合），别用
text-center，改用h-100 d-flex flex-column justify-content-center，但仅限明确需要时
多卡片并排？交给 .row + .col-*，别手写 display: flex
响应式多列布局的唯一正解，是让 Bootstrap 栅格系统自己算宽度和换行。手动加 display: flex、flex-basis: calc(25% - 16px) 这类写法，会和 .row 的负 margin 冲突，小屏下卡片直接掉出容器。
使用场景：餐厅列表、产品展示、用户推荐等需横向排列的卡片组。
- 标准四列→两列→单列写法：
<div class="col-12 col-sm-6 col-md-4 col-xl-3"><div class="card h-100">...</div></div> -
h-100必须加在.card上，否则同一行卡片高度由内容决定，视觉割裂 - 删掉所有自定义 margin/padding，改用 Bootstrap 间距工具类：比如
m-2（所有屏）或mb-3 mb-md-0（小屏有底边距、中屏以上取消） - viewport meta 标签必须存在：
<meta name="viewport" content="width=device-width, initial-scale=1">，否则sm/md断点全失效
动态生成卡片时，别拼 HTML 字符串，用 document.createElement 搭配 className
从 API 拿到一个餐厅数组，想循环生成卡片？直接 innerHTML += '<div class="card">...' 看似快，但容易 XSS、难维护、class 写错不报错。真正可控的方式是 DOM 方法逐层构建。<p>参数差异：字符串拼接无法动态控制 class 存在与否（比如有的卡有图、有的没有），而 <code>element.classList.toggle('card-img-top', hasImage) 可精确开关。
- 创建卡片主体：
const card = document.createElement('div'); card.className = 'card h-100'; - 图片节点要单独判断是否存在：
if (item.img) { const img = document.createElement('img'); img.className = 'card-img-top'; img.src = item.img; card.appendChild(img); } - 标题和文字统一走
.card-body包裹，避免漏掉内边距逻辑 - 最后 append 到容器前，确认容器本身是
<div class="row">，别塞进没 class 的空 div 里<h3> <code>.card-group已废弃，统一高度用h-100+.row就够了Bootstrap 4 里的
.card-group在 v5 中已标记为 deprecated，官方文档不再推荐。它强行 flex 排列、共享边框，反而破坏栅格语义，还和.row嵌套时产生双重 flex，导致卡片宽度压缩或换行异常。性能影响：多一层 wrapper 就多一次 layout 计算，对上百张卡片的列表页有可测延迟。
- 替代方案就是前面说的：
.row+.col-*+ 每个.card.h-100 - 如果真需要“无缝拼接”效果（比如价格对比三栏），用
border-0 shadow-none手动清掉边框和阴影，比依赖.card-group更可控 - 旧项目迁移时注意：搜索代码里所有
card-group，直接删掉外层 div，保留内部.card即可
最常被忽略的一点：图片没加
.img-fluid类。哪怕用了.card-img-top，如果原图超宽，依然会在小屏上横向滚动——这个类才是保证图片随父容器缩放的关键，不是可选项。 - 替代方案就是前面说的：
