row-cols-类最省事，是bootstrap 5+内置的响应式工具类，直接作用于.row，强制每行显示固定数量等宽列，无需手算col-宽度，且天然支持断点控制（如row-cols-md-4），避免小屏退化为单列等问题。
用 row-cols-* 类最省事
Bootstrap 5+ 内置的 row-cols-* 是专为“每行固定数量子项”设计的响应式工具类，它绕过手动计算 col-* 宽度，直接交由 CSS Grid 自动均分。比如 row-cols-3 表示无论屏幕多宽，每行都塞 3 个等宽列；加断点前缀如 row-cols-md-4 就能在中屏及以上每行显示 4 个。
常见错误是试图用 col-4 × 3 模拟三列——这在小屏下会退化成单列（因 col-4 默认回退为 col-12），而 row-cols-3 会保持三列直到断点生效。
-
row-cols-2：每行强制 2 列，手机端也生效；加-sm后只在 ≥576px 时启用 - 它作用于
.row元素，子元素只需是普通<div>，无需加任何 <code>col-*类 - 内部子项若内容高度不一，需额外加
h-100和d-flex flex-column配合flex-grow-1拉伸卡片主体 - 不支持 IE11；若需兼容，得降级用
col-sm-6 col-md-4手动组合，并确保所有断点宽度加起来 ≤12 - 断点未显式声明时，子列会在小屏自动变成
col-12，导致“本想三列结果变一列” - 父容器宽度变化（比如侧边栏展开）会导致列宽重算失准，
row-cols-*基于 Grid 的列轨道不受此影响 - 动态插入内容时，JS 插入新
col-*元素需同步检查总和是否超 12，否则整行错位；row-cols-*无此校验负担 - 如果块内要嵌套栅格（如卡片里再分左右），必须在块内加新
.row，否则子col-*失效——而row-cols-*只管外层排布，嵌套逻辑更清晰 -
row-cols-*底层是display: grid，列宽严格均分、无 flex-basis 计算误差 -
d-flex方案需手动设子项flex: 0 0 calc(100% / 3)，CSS 里写 calc() 易出错，且 Safari 旧版对 calc() 在 flex 中的支持不稳定 -
row-cols-*自带 gutter（间距）继承机制，d-flex要额外加gap或 padding/margin 模拟，响应式切换麻烦 - 如果块需要垂直居中或等高对齐，
row-cols-*配合align-items-stretch更直接；d-flex得层层加h-100和min-height - 给卡片容器加
h-100 d-flex flex-column，再给正文区域加flex-grow-1，让标题/图片/文字区域自动撑满剩余空间 - 避免只加
d-flex或只加h-100：前者不提供高度上下文，后者不触发弹性拉伸 - 如果卡片有 footer（如按钮），需用
mt-auto推到底部，否则flex-grow-1会把它一起拉长 - Chrome DevTools 里检查卡片的 computed height，确认父
.row有明确高度来源（比如设置了min-vh-100或包裹容器有height: 100vh）
为什么不用 col-* 手算更可靠
手写 col-* 类（如 col-6 col-6 或 col-sm-4 × 3）看似可控，但实际容易踩坑：
row-cols-* 和 d-flex + flex-wrap 的区别
有人会想用 d-flex flex-wrap 加 flex-shrink-0 控制子项数量，但这不是 Bootstrap 的推荐路径：
移动端卡片高度不齐怎么处理
即使用了 row-cols-3，卡片内容长短不一也会导致视觉割裂——这不是栅格问题，而是内部布局没约束：
真正卡住人的往往不是“怎么写”，而是“为什么写了没效果”——比如忘了 row-cols-* 只对 .row 生效，或者在卡片里漏了 h-100 这一层高度传递。这些细节不报错，但页面就是不对劲。
