GitHub风格卡片网格布局的核心是信息密度高、列宽克制、小屏不堆文字、卡片高度一致、触控友好；实现需正确使用Bootstrap栅格（如col-12 col-sm-6 col-md-4）、.row容器、d-flex+h-100等类，避免结构错误和间距滥用。
GitHub 风格的卡片网格布局，核心不是“长得像”，而是「信息密度高、列宽克制、小屏不堆文字、卡片高度一致、触控友好」——用 Bootstrap 实现时，90% 的问题出在结构错误或间距滥用，而不是样式没调好。
为什么卡片在手机上挤成一列还文字溢出？
根本原因是用了固定列数（如 col-md-4）但没给小屏留退路，或漏了 .row 容器导致栅格失效。
- 别写
<div class="col-md-4"><div class="card">...</div></div>直接丢在<body>里——必须包在<div class="row">内，否则col失去 flex 布局能力，退化为块级元素垂直堆叠 - 小屏想自动换行又不溢出？改用
col-12 col-sm-6 col-md-4，而不是全写col-md-4；col-12确保手机必单列，col-sm-6在平板上两列，避免三列硬挤 - 文字折行撑高卡片？给
.card-body加class="d-flex flex-column"，再给描述段落加flex-grow-1，让内容区自动撑满剩余空间，按钮稳住底部
卡片高度不一致导致网格错位怎么办？
这不是 JS 要解决的问题，是 CSS 层面没约束 flex item 的高度行为。Bootstrap 默认不强制等高，得手动补。
- 给每个
.col加class="d-flex"，再给.card加h-100，确保卡片占满列容器高度 - 卡片内部用
class="d-flex flex-column h-100"，让标题、描述、按钮形成垂直弹性流 - 避免给
.card设固定height或min-height：会破坏响应式，尤其在字体缩放或动态内容下容易截断
间距混乱、移动端点击困难怎么调？
GitHub 的卡片间距干净利落，靠的是统一的外边距节奏 + 可触控区域达标，不是靠手调 margin 像素值。
- 用 Bootstrap 内置间距工具：给
.row加g-4（即gap: 1rem），比手动写mb-3更可靠，且自动适配所有断点 - 别给
.card单独加mb-3：会导致小屏下卡片间距离过大，大屏下又因换行逻辑异常出现空隙 - 移动端点击区域太小？把整个卡片变成链接：
<a href="..." class="text-decoration-none"><div class="card">...</div></a>，再加style="min-height: 44px;"或用py-3确保上下内边距 ≥ 16px（配合默认 1rem 字体，总高≈44px）
图标+文字卡片网格容易踩的坑
如果卡片带图标（比如服务介绍），结构错一层，小屏就全乱：图标偏移、文字换行、列高崩塌。
- 图标不能塞进
.card里——必须和.card平级，同为.col的直接子元素，例如：<div class="col-6 col-md-4"><i class="bi bi-cloud fs-2"></i><div class="small mt-1">云存储</div><div class="card h-100">...</div></div> - 图标尺寸统一用
fs-2或fs-3，别混用font-size: 1.5rem和fs-1，否则列容器高度计算失准 - 小屏文字过长？给文字容器加
text-truncate，再配合style="max-width: 120px;"（可选），防止撑开列宽
最常被忽略的一点：viewport meta 标签必须存在且正确，否则所有响应式断点都会失效；另外，g-* 间距类在 Bootstrap 4.6 以下版本不可用，如果项目还在用 4.3，请改用 mb-3 配合 row-cols-* 替代。
