Bootstrap 4中卡片列数由栅格类控制，.card-columns已弃用；应使用.row配合.col-*类（如col-12、col-sm-6、col-md-4、col-lg-3）实现响应式列布局。
Bootstrap 4卡片列数由栅格类控制，不是靠自定义CSS覆盖
直接写 .card-columns 或修改 column-count CSS 属性是无效的——Bootstrap 4 的响应式列布局必须用内置栅格系统（.row + .col-*）实现。所谓“卡片列”在 v4 中已弃用 .card-columns（它基于 CSS Columns，无法响应式断点控制列数），正确路径是把卡片放进栅格容器里。
用 .col-* 类组合控制不同屏幕下的列数
核心逻辑：每行（.row）内放若干 .col-*，通过断点前缀决定该尺寸及以上显示几列。例如：
<div class="row"> <div class="col-12 col-sm-6 col-md-4 col-lg-3"><div class="card">...</div></div> <div class="col-12 col-sm-6 col-md-4 col-lg-3"><div class="card">...</div></div> <!-- 更多相同结构的卡片 --> </div>
这意味着：
-
col-12：超小屏（ -
col-sm-6：≥576px 时每行最多2张 → 2列 -
col-md-4：≥768px 时每行最多3张 → 3列 -
col-lg-3：≥992px 时每行最多4张 → 4列
注意：所有 .col-* 在同一行内宽度之和应为 12（如 4×col-lg-3），否则会换行错位。
立即学习“前端免费学习笔记（深入）”；
避免常见错误：不要用 flex 或 grid 覆盖默认栅格行为
有人尝试给 .row 加 display: flex 或 display: grid 来“增强控制”，这反而破坏 Bootstrap 4 栅格的负边距（margin-left: -15px）、内边距（padding-left/right: 15px）配对逻辑，导致卡片间距异常或溢出容器。
如果真需更灵活布局（比如等高卡片、自动换行），优先用：
-
.card-deck（固定数量，不响应式） -
.card-group（卡片并排无间隙） - 或升级到 Bootstrap 5 的
.row-cols-*类（但 v4 不支持）
动态列数需 JS 配合时，只改 className，别动样式表
若业务要求根据窗口宽度实时切换列数（比如拖拽浏览器调整），不要用 document.styleSheets 插入 CSS 规则，而是动态切换预设的栅格类：
const cards = document.querySelectorAll('.card');
window.addEventListener('resize', () => {
const width = window.innerWidth;
cards.forEach(card => {
card.parentElement.className = width < 576 ? 'col-12' :
width < 768 ? 'col-sm-6' :
width < 992 ? 'col-md-4' : 'col-lg-3';
});
});这里关键点是：只操作父容器的 className，且复用 Bootstrap 已定义的类名；否则自定义类容易与栅格断点媒体查询冲突，造成样式未生效。
最易被忽略的是：卡片内容高度不一致时，.row 内 .col-* 会因高度差异导致下一行卡片顶部不对齐——这时得加 .row-eq-height（需自行定义）或用 align-items: stretch 配合 display: flex 于 .row，但必须同步重置左右负边距以避免水平滚动条出现。
