使用 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：

示例结构优化：

 
  
    
      
        
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 兼容）

  
  
  
  


  
    
      
      
        
          
            
Q1 Planning
            
              Planned
              Published
            
            @@##@@
          
        
      
      
    
  

✅ 总结：三步构建可靠响应式卡片流

1. 结构归位：卡片放入 .row > .col-*，而非 .card-group 或自定义 flex 容器；
2. 断点明确：用 col-{breakpoint}-{cols} 组合（如 col-xl-3 col-md-6 col-12）声明各尺寸下的列数；
3. 间距可控：用 p-*/m-* 替代手写 CSS，保持一致性与可维护性。

遵循以上原则，即可零成本实现专业级响应式卡片布局，无需复杂媒体查询或 Hack 式样式覆盖。