github风格卡片网格需用row+col+card实现，关键在信息密度、垂直节奏与断点控制：卡片加h-100和d-flex flex-column确保等高对齐，移动端固定280px宽并居中，链接用stretched-link保障触控区达标，子网格必须嵌套于row内。
直接用 row + col + card 就能实现 GitHub 风格的卡片网格，但关键不是“堆卡片”，而是控制信息密度、垂直节奏和断点行为——稍一错位，小屏就变乱麻。
卡片必须用 h-100 + d-flex flex-column 强制等高
GitHub 的仓库卡片在桌面端高度一致，移动端也保持视觉对齐。这不是靠 JS 算，而是靠 CSS 布局约束：
-
card必须加h-100，否则它只按内容撑高，列容器高度就参差不齐 -
card-body要加d-flex flex-column，再给描述文字加flex-grow-1，把按钮“钉”在底部 - 别信
align-items-center或text-center——它们只居中内容，不解决高度塌陷 - 如果卡片里有头像或徽章，统一用
rounded-circle和small类，避免 font-size 差异拉高整列
响应式断点要对齐 GitHub 实际行为，别照搬 Bootstrap 默认
GitHub 在 ~992px 才开始单列堆叠（不是 md 的 768px），且移动端卡片宽度固定为 280px —— 这直接影响你写类名：
Git Repo Reader
下载
辅助阅读和快速理解 GitHub/Git 项目结构与核心价值的结构化方法论。 当用户请求"分析这个 GitHub 项目"、"帮我读一下这个 repo"、"了解这个项目是做什么的"、 "怎么用这个项目"、"怎么跑这个项目"、"这个项目用了哪些技术"，或任何涉及 GitHub/Git 仓库阅读、理解、技术评估、快速上...
- 桌面端用
col-lg-3（而非col-md-4），确保 ≥992px 时每行四张卡 - 平板过渡用
col-md-4，768–991px 时三列，避免文字挤成两行 - 手机端用
col-12，但必须配合max-width: 280px+mx-auto居中，不然卡片太宽、字太小 - 别用
col-sm-6：小屏下两列太窄，图标+标题+语言标签根本放不下
卡片内链接必须用 stretched-link，否则移动端点不准
GitHub 卡片整个区域都可点击，不是只点“Star”按钮。默认 card 的 padding 只有 1rem（≈16px），远低于 WCAG 要求的 44×44px 触控区：
- 把卡片最外层
div.card包进<a href="..." class="stretched-link"></a>，不要只给按钮加链接 - 确保
a是card的直接父级，否则stretched-link失效 - 加
text-decoration-none去掉下划线，再用text-reset统一颜色，避免悬停变色干扰视觉 - 图标（如
bi-star）别用btn包裹——它自带 padding 和 border，会破坏卡片内间距节奏
嵌套子网格时，row 不能省，col 不能直接塞进 card-body
比如想在卡片底部加「Language: JavaScript · Stars: 1.2k」这种双信息行，常见错误是直接写 <div class="col-6">...</div>：
-
col必须是row的直接子元素，否则 Flex 布局失效，宽度计算错乱 - 正确写法：
<div class="card-body d-flex flex-column">...<div class="row mt-auto"> <div class="col-6">Language</div> <div class="col-6 text-end">Stars</div> </div> </div> -
mt-auto把子row推到底部，配合flex-column的主轴方向 - 子
row内部列宽总和必须为 12（如col-6 col-6），否则换行不可控
真正难的不是写出结构，而是让每张卡片在不同设备上都维持同样的呼吸感：图标大小、文字行高、边距比例、触控反馈——这些细节一旦松动，就不再是 GitHub 风格，只是长得像的卡片堆砌。
