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 <p>这里关键点是：只操作父容器的 <code>className</code>，且复用 Bootstrap 已定义的类名；否则自定义类容易与栅格断点媒体查询冲突，造成样式未生效。</p><p>最易被忽略的是：卡片内容高度不一致时，<code>.row</code> 内 <code>.col-*</code> 会因高度差异导致下一行卡片顶部不对齐——这时得加 <code>.row-eq-height</code>（需自行定义）或用 <code>align-items: stretch</code> 配合 <code>display: flex</code> 于 <code>.row</code>，但必须同步重置左右负边距以避免水平滚动条出现。</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
