github风格响应式卡片网格由栅格断点、卡片结构约束、内容高度归一化三要素决定；col-*必须直接包裹card，禁用中间wrapper；等高需h-100+d-flex+flex-grow-1；断点应md起3列、xl保持3列控密度。
GitHub 风格的响应式卡片网格（比如仓库列表、用户项目墙）不是靠 magic class 实现的，而是由三要素决定：栅格断点选择、卡片容器结构约束、内容高度归一化。直接套 col-3 或 card 会错位、换行乱、高度参差——问题不在样式，而在层级和约束缺失。
col-* 必须直接包裹 card，不能嵌套在额外 div 里
常见错误是把卡片包进一层 wrapper：<div class="col-md-4"><div class="card-wrapper"><div class="card">...</div></div></div>。这会导致：
-
col-md-4的宽度计算被内部 wrapper 的 padding/margin 干扰，小屏下实际列宽≠预期 -
h-100失效：wrapper 没设高度，card 无法继承父高 - flex 布局中断：row → col → card 是唯一受 Bootstrap flex 控制的路径，中间插一层就脱离栅格流
正确写法必须平级：<div class="col-md-4"><div class="card h-100">...</div></div>
卡片等高必须用 h-100 + d-flex flex-column + flex-grow-1
单纯加 h-100 不够。当标题行数不一、描述长短不一，card-body 内部元素仍会撑开或塌陷，导致视觉错行。关键是要让内容区“主动占满剩余空间”：
- 给
card加h-100 d-flex flex-column - 给
card-body加d-flex flex-column - 给描述文字
p加flex-grow-1，按钮加mt-auto
示例结构：
<div class="col-md-4">
<div class="card h-100 d-flex flex-column">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Repo Name</h5>
<p class="card-text flex-grow-1">Short description.</p>
<div class="mt-auto">
<span class="badge bg-secondary">TypeScript</span>
</div>
</div>
</div>
</div>
断点组合要匹配 GitHub 实际行为：md 起步，xl 固定列数
GitHub 在 ≥768px（md）开始显示 3 列，≥1200px（xl）保持 3 列而非拉到 4 列——它不追求“填满屏幕”，而是控制信息密度。所以别用 col-12 col-sm-6 col-md-4 col-xl-3（那会在 xl 下变成 4 列），而应：
- 小屏（col-12
- 平板起（≥768px）：3 列 →
col-md-4 - 大屏（≥1200px）：仍 3 列 → 不加
col-xl-*，或显式写col-xl-4
同时给外层 row 加 g-3（而非 g-4），更贴近 GitHub 的紧凑间距。
移动端点击区域不足？用 stretched-link + text-decoration-none
GitHub 卡片整个区域可点，但默认 card 的 padding 只有 1rem（≈16px），手指点击极易 miss。WCAG 要求最小触控区 44×44px，必须扩大有效热区：
- 不要只给按钮加链接，要把整个
card变成可点击块 - 在
card内部最外层内容区（如card-body）加<a href="#" class="stretched-link text-decoration-none"></a> - 确保
a是card-body的直接子元素，否则stretched-link的绝对定位会失效
注意：stretched-link 依赖 position: relative，所以 card-body 必须有该声明（Bootstrap 默认已有）。
真正卡住人的从来不是 class 名写不对，而是卡片没被 col 直接承载、高度没用 flex-grow 锚定、断点没按真实产品逻辑选——这些细节漏掉一个，网格就“看起来差不多但总差点意思”。
