<p>卡片结构应使用 .card 而非 .list-group，正确嵌套为 .row + 多个 .col-* 包裹独立 .card；需统一高度时加 h-100 及 flex 布局；响应式断点应按内容密度从移动端优先设定；交互卡片须支持键盘与触屏，添加 role="button"、tabindex="0"、cursor: pointer 和 :focus-visible；加载与空状态需完整呈现骨架屏或结构化提示。</p>
卡片结构用 .card 而不是 .list-group
很多人一想“列表”，就直接套 .list-group，结果发现样式松散、边距不对、响应式塌陷——因为 Bootstrap 的卡片式列表本质是多个独立 .card 并列，不是语义化的列表容器。
正确做法是用 .row + 多个 .col-* 包裹单个 .card，每个卡片自包含标题、内容、操作区。这样既能保持卡片独立性，又能通过栅格控制数量和换行逻辑。
- 别把所有卡片塞进一个
<ul>里：语义错、样式难控、移动端易错位 -
.card内部用.card-body做主内容区，.card-footer放按钮或标签，避免手动加margin - 如果需要统一高度（比如多张卡片并排时文字行数不同），给
.card加h-100，再给.card-body加h-100 d-flex flex-column，最后让内容区域flex-grow-1
响应式断点要按实际内容密度设，别硬套 col-md-4
写死 col-md-4 意味着中屏起每行三列，但如果你的卡片带图片+长描述+两个按钮，实际在 iPad 尺寸下就会挤成一团、文字折行混乱。
更稳妥的是从移动端优先反推：先定最小宽度能舒适展示的列数，再逐级加宽。比如内容较简的卡片可用 col-12 col-sm-6 col-lg-4；图文混排的则建议 col-12 col-md-6 col-xl-3。
- 测试真机或 Chrome DevTools 的 “Responsive” 模式，重点看
768px和992px两档是否自然换行 - 避免在
col-类里混用col-auto：会导致宽度计算冲突，卡片横向错位 - 如果卡片内嵌
<img>，务必加img-fluid，否则图片会撑破容器
点击交互别只靠 :hover，得补 cursor: pointer 和焦点状态
卡片带跳转或展开功能时，只写 .card:hover { transform: translateY(-2px); } 是不够的——没鼠标设备（触屏、键盘导航）完全感知不到可点击，且无障碍阅读器会忽略它。
- 给可交互卡片加
role="button"和tabindex="0"，确保键盘能聚焦 - CSS 中必须显式声明
cursor: pointer，否则部分浏览器（尤其是 Safari）默认不显示手型 - 用
:focus-visible替代单纯:focus，避免鼠标用户看到意外虚线框 - 如果卡片用
<a>包裹，href 不能为空，至少写href="#"并preventDefault，否则刷新或跳顶
加载状态和空状态容易被忽略，但用户一眼就能感知
卡片列表常配合异步加载（比如分页、搜索），但很多人只处理成功态，失败或加载中就留白——用户盯着空白卡片等三秒，大概率就关掉了。
- 加载中用
.card > .card-body里放骨架屏：<div class="placeholder-glow"><span class="placeholder col-12"></span></div> - 空状态不要只写“暂无数据”，要在卡片内部渲染完整结构：
.card容器还在，里面放图标 + 文字 + 可选操作按钮 - 服务端返回空数组时，前端别直接
map()渲染，先判断长度，避免空卡片阵列 - 卡片数量少（≤3）时，禁用分页控件，否则底部突兀出现“1/1”页码很奇怪
卡片的边界、阴影、圆角这些视觉细节，Bootstrap 默认值已经够用；真正卡住进度的，往往是结构嵌套错层、响应式断点失配、或者交互反馈缺失——这三块调对了，样式反而不用大动。
