使用 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-* 容器中 -->
<div class="col-12 col-md-6 col-xl-3">
<div class="card h-100"> <!-- 推荐加 h-100 保证等高 -->
<div class="card-body">
<!-- 卡片内容 -->
</div>
</div>
</div>- 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 |
示例结构优化：
<div class="row g-3"> <!-- Bootstrap 4.6+ 支持 g-*（gap），若用 4.3 则用 m-* 替代 -->
<div class="col-12 col-md-6 col-xl-3">
<div class="card h-100 shadow-sm border-0">
<div class="card-body p-3">
<h5 class="card-title">Card Title</h5>
<p class="card-text text-muted small">Content here...</p>
</div>
</div>
</div>
<!-- 更多卡片... -->
</div>⚠️ 注意：Bootstrap 4.3 不支持 g-*（gap）类（该特性从 4.6 开始引入），若必须使用 4.3，请改用 mx-1 + my-2 组合模拟间隙，或在外层 .row 添加 margin-left/right: -6px，子项加 px-1 —— 但更推荐升级至 4.6+ 或直接用 m-* 精确控制。
✅ 必备基础：<meta viewport> 不可省略
确保 <head> 中包含标准响应式视口声明，否则移动端将忽略媒体查询：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
缺失此标签会导致页面在移动设备上以桌面宽度渲染，响应式失效。
❌ 避免的常见误区
- 不要给 .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 兼容）
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<title>Responsive Cards</title>
</head>
<body>
<div class="container mt-4">
<div class="row">
<!-- 卡片 1 -->
<div class="col-12 col-md-6 col-xl-3 mb-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-3">
<h6 class="card-title">Q1 Planning</h6>
<select class="form-control form-control-sm mb-2">
<option>Planned</option>
<option>Published</option>
</select>
<img src="https://via.placeholder.com/150" class="card-img-top rounded" alt="Preview">
</div>
</div>
</div>
<!-- 卡片 2–4 同理... -->
</div>
</div>
</body>
</html>✅ 总结：三步构建可靠响应式卡片流
- 结构归位：卡片放入 .row > .col-*，而非 .card-group 或自定义 flex 容器；
- 断点明确：用 col-{breakpoint}-{cols} 组合（如 col-xl-3 col-md-6 col-12）声明各尺寸下的列数；
- 间距可控：用 p-*/m-* 替代手写 CSS，保持一致性与可维护性。
遵循以上原则，即可零成本实现专业级响应式卡片布局，无需复杂媒体查询或 Hack 式样式覆盖。
