结论：应使用bootstrap 4栅格类而非纯css实现多列自适应卡片布局，因column-count不响应断点、flex-wrap易与.row冲突，导致错位、溢出及横向滚动；正确用法是按设备场景选col-12（超小屏）、col-sm-6（小屏）、col-md-6（中屏）、col-xl-3（大屏）。
直接说结论：别用纯 CSS 写多列自适应卡片布局，Bootstrap 4 的栅格系统已经封装好了所有响应式逻辑，硬套 display: flex 或 column-count 反而会破坏断点行为、错位、溢出，甚至在小屏出现横向滚动条。
为什么不能用 column-count 或 flex-wrap 手动控制列数
因为 Bootstrap 4 的响应式断点（sm、md、xl）是基于视口宽度 + 容器宽度双重计算的，而 column-count 是 CSS 多列模块，只按内容流划分，不识别媒体查询；flex-wrap 配合 flex-basis 又容易和 .row 的 margin/padding 冲突，导致卡片错位或换行异常。
常见错误现象：
- 桌面端显示 4 列，但缩到平板尺寸时变成 3 列+1 列独占一行（不是预期的 2 列）
- 卡片底部对齐失效，高度参差不齐
- 移动端出现横向滚动条（因
flex-basis: calc(25% - 16px)在小屏下计算出负 margin）
col-12 col-sm-6 col-md-6 col-xl-3 这组类怎么选才不踩坑
这组类不是随便拼的，每个断点都对应明确的设备场景和视觉节奏：
-
col-12：超小屏（ -
col-sm-6：≥576px（手机横屏/小平板），两列并排，留出手指点击空间 -
col-md-6：≥768px（中等平板），仍保持两列——注意这里不是col-md-4，因为 768px 屏宽下 3 列会导致卡片过窄，图文比例失衡 -
col-xl-3：≥1200px（大桌面），四列，充分利用宽屏空间
关键细节：
- 不要写
col-lg-3，因为 lg（≥992px）和 xl（≥1200px）之间有 208px 空档，可能在某些宽屏笔记本上卡在 3 列不升级 - 如果项目需要「中屏三列」，应改用
col-md-4，但必须同步加col-lg-3或col-xl-3，否则 ≥992px 会退化为 3 列而非 4 列
卡片等高、间距、垂直对齐必须配哪些类
只靠 .col-* 不够，卡片内容长度不一，必须用工具类约束渲染行为：
- 给
.card加h-100：让卡片拉满父列高度，这是等高的前提 - 给
.row加g-3（Bootstrap 4.6+）或mx-n2+px-2（4.3）：控制列间间隙，避免margin-bottom手动写死导致响应失效 - 给
.card-body加p-3 p-md-4：小屏内边距紧凑，中屏起放宽，避免文字贴边 - 按钮或操作区要底部对齐？在
.card-body内加d-flex flex-column h-100，再给按钮加mt-auto
漏掉 h-100 或没给 .row 加 gap 类，是卡片堆叠错位最常见原因。
viewport 和自定义 CSS 是最容易被忽略的两个点
即使类名全对，这两处出问题，整个响应式就瘫痪：
- 必须在
里声明：<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">—— 没它，iOS Safari 会以 980px 宽度渲染，所有sm及以上断点失效 - 全局搜索项目里有没有
.row { display: block !important }或#cardsContainer { display: flex }这类覆盖样式——它们会直接干掉 Bootstrap 的 flex 布局，让align-items-stretch彻底失效
真要调样式，优先用 Bootstrap 自带的间距类（m-*, p-*, mt-*, mb-*）和高度类（h-100, min-vh-100），而不是重写 display/flex-basis。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
