本文详解如何利用 bootstrap 4 的栅格系统与响应式工具类，构建真正语义化、间距合理、跨设备一致的卡片布局——在大屏显示 4 列，中屏（平板）降为 2 列，小屏（手机）自动堆叠为单列，并避免手动 flex 布局冲突。

在 Bootstrap 4 中实现响应式卡片网格，核心原则是「让栅格系统管理布局，而非覆盖它」。原代码中混合使用 display: flex、flex-basis 和自定义 width 计算（如 calc(25% - 16px)），不仅违背 Bootstrap 的设计哲学，还极易与内置 .row/.col-* 的 margin/padding 规则冲突，导致错位、溢出或响应失效。

✅ 正确做法：*将每张卡片包裹在语义化的 `.col-` 容器内**，由 Bootstrap 栅格自动处理宽度、间距与换行逻辑。推荐采用以下响应式断点组合：

• col-12：所有超小屏（
• col-sm-6：≥576px（手机横屏/小平板）→ 每行 2 张
• col-md-6：≥768px（中等平板）→ 保持 2 列（可按需改为 col-md-4 实现 3 列）
• col-xl-3：≥1200px（大桌面）→ 每行 4 张（12 ÷ 3 = 4）

? 关键细节优化：

• 移除冗余 CSS：删除 #cardsContainer { display: flex; } 及 .card { flex-basis: 25%; } —— 这些会干扰栅格流式布局；
• 善用间距工具类：用 m-1 m-md-2（小屏外边距 0.25rem，中屏起 0.5rem）替代手动 margin-bottom，配合 p-1 p-md-3 控制内边距，视觉更均衡；
• 强制等高与垂直对齐：为 .card 添加 h-100，确保同一行卡片高度一致；表单控件使用 mt-3 统一顶部间距；
• 必须声明 viewport：在 中添加

  否则移动端将忽略所有响应式断点。

⚠️ 注意事项：

• 避免嵌套 .card-group：原代码中 会引入额外 flex 包裹，与 .row 冲突，直接删除即可；
• 不要混用 card 与 form-group row：.card 是容器组件，.form-group.row 是表单布局，应让表单元素作为 .card-body 的子元素，而非反向嵌套；
• 图片建议使用 img-fluid 类保证响应式缩放，避免横向溢出；
• 若需滚动容器，请对 #cardsContainer 设置 max-height + overflow-y: auto，而非固定 height: 1200px（破坏响应性）。

完整工作示例（精简版）：

  
    
    
      
        
          
Card 1
          
Lorem ipsum dolor sit amet...
          Action
        
      
    
    
  

总结：Bootstrap 4 的响应式能力源于其栅格系统的层级化断点设计。放弃“用 CSS 覆盖栅格”的思路，转而信任 .col-* 工具类，辅以间距（m-*, p-*）、尺寸（h-100, w-100）和阴影（shadow-sm）等实用类，即可零配置实现专业级响应式卡片布局——简洁、可靠、易维护。