使用 bootstrap 4 内置栅格系统（如 `col-xl-3`、`col-md-6`、`col-12`）可轻松实现响应式卡片布局：大屏显示4列，中屏2列，小屏1列堆叠，并通过间距工具类（`p-*`/`m-*`）统一控制内边距与外边距。
在 Bootstrap 4 中，实现“桌面端每行4张卡片、平板端2张、手机端1张堆叠”的响应式效果，无需手动写 Flexbox 或媒体查询覆盖默认行为——应优先利用其成熟的响应式栅格系统（Grid System），配合语义化工具类完成布局。
✅ 正确做法：使用 Bootstrap 栅格类控制列宽
核心在于为每个 .card 容器（注意：不是 .card 元素本身，而是其父级容器）添加响应式列类：
- col-12：所有屏幕宽度下占满一行（12/12 → 1列）
- col-md-6：≥768px（md 断点）时占6列 → 每行2张
- col-xl-3：≥1200px（xl 断点）时占3列 → 每行4张（4 × 3 = 12）
? 提示：Bootstrap 4 的栅格基于 12 列系统，因此 col-xl-3 是实现「4列」的最简洁方式，无需计算 calc(25% - gap) 或重写 flex-basis。
✅ 合理控制间距：用内置间距工具类替代自定义 margin/padding
原代码中混合使用了 margin-bottom: 16px、p-1 p-md-3 等，易导致嵌套错乱。推荐统一使用 Bootstrap 4 的 spacing utilities：
| 类名 | 含义 |
|---|---|
| m-2 | 所有方向外边距 0.5rem（≈8px） |
| m-md-3 | ≥768px 时外边距 1rem（≈16px） |
| p-2 | 所有方向内边距 0.5rem |
| pb-0 | 仅底部内边距为 0 |
示例结构优化：
Card Title
Content here...
⚠️ 注意：Bootstrap 4.3 不支持 g-*（gap）类（该特性从 4.6 开始引入），若必须使用 4.3，请改用 mx-1 + my-2 组合模拟间隙，或在外层 .row 添加 margin-left/right: -6px，子项加 px-1 —— 但更推荐升级至 4.6+ 或直接用 m-* 精确控制。
✅ 必备基础： 不可省略
确保
中包含标准响应式视口声明，否则移动端将忽略媒体查询：缺失此标签会导致页面在移动设备上以桌面宽度渲染，响应式失效。
❌ 避免的常见误区
- 不要给 .card 直接设 width: 25% 或 flex-basis：这会与 Bootstrap 栅格冲突，破坏响应逻辑；
- 不要保留冗余的 .card-group 包裹：.card-group 用于无间隙并排卡片（如价格卡），此处反而限制响应行为；
- 避免重复 height: 1200px 和 overflow-y: scroll：固定高度 + 滚动会截断内容，响应式布局应自然流式伸缩；
- 慎用 !important：如 border-radius: 5px !important 易阻碍主题定制，优先用 rounded 工具类（如 rounded-lg）。
✅ 完整精简示例（Bootstrap 4.3 兼容）
Responsive Cards Q1 Planning
@@##@@
✅ 总结：三步构建可靠响应式卡片流
- 结构归位：卡片放入 .row > .col-*，而非 .card-group 或自定义 flex 容器；
- 断点明确：用 col-{breakpoint}-{cols} 组合（如 col-xl-3 col-md-6 col-12）声明各尺寸下的列数；
- 间距可控：用 p-*/m-* 替代手写 CSS，保持一致性与可维护性。
遵循以上原则，即可零成本实现专业级响应式卡片布局，无需复杂媒体查询或 Hack 式样式覆盖。
