row-cols-*类直接作用于.row，按断点控制每行显示列数并自动均分宽度，无需为每个.col设宽；如row-cols-1 row-cols-md-3实现小屏单列、中屏三列。
直接写 row-cols-* 系统类就能按屏幕尺寸控制每行显示几列，不用手动给每个 .col 写宽度类——这是最省事、最不容易出错的方式。
用 row-cols-* 控制每行列数（推荐首选）
它作用于 .row 元素，自动把子 .col 按需均分，比一个个写 col-md-4 更简洁、更健壮。
- 只写
row-cols-3：所有屏幕下每行强制 3 列（包括手机），不响应式 - 加断点前缀才响应式，例如
row-cols-sm-2 row-cols-lg-4：≤575px 时每行 1 列（默认），≥576px 每行 2 列，≥992px 每行 4 列 - 断点类之间不“继承”，
row-cols-lg-4对中屏（md）无效，必须显式补row-cols-md-3或留空让它用上一级值 - 数值超出实际子元素数没关系，比如 5 个
.col配row-cols-3，最后两列会自然换行，不会溢出或隐藏
row-cols-auto 是什么，什么时候用
row-cols-auto 不是“自动算列数”，而是让每列宽度由内容撑开（类似 flex: none），列宽不均等、不占满整行。它和列数控制无关，别误用。
- 适合场景：图标组、标签云、工具按钮栏——内容宽度差异大，不需要等宽对齐
- 若混用
row-cols-auto和row-cols-md-3，后者在 ≥768px 时会覆盖前者，行为可预测；但小屏下仍是内容自适应宽度，不是“1 列” - 想实现“小屏单列 + 大屏等宽多列”，正确组合是：
row-cols-1 row-cols-md-3，不是row-cols-auto
为什么写了 row-cols-md-2 在手机上还是多列
因为没声明小屏行为，默认回退到浏览器原始流式布局（即所有 .col 垂直堆叠 → 实际是 1 列），但如果你漏了 .row 或用了错误容器，就可能看到异常排版。
- 检查是否每个
.col都严格嵌套在.row内，且.row在.container或.container-fluid中 - 用开发者工具看
.row的 computeddisplay是否为flex；如果不是，说明类名拼错或 CSS 未加载 - 常见拼写错误：
row-col-md-2（少 s）、row-cols-md2（缺短横线）、row-cols-mb-2（bp 写错） - 如果用了 Bootstrap 4，
row-cols-*不可用——该功能从 Bootstrap 5 才引入
要兼容旧版 Bootstrap 或需要精确列宽怎么办
Bootstrap 4 及更早版本不支持 row-cols-*，只能回到传统方式：为每个 .col 显式设置响应式宽度类，并确保总和 ≤12。
- 示例（Bootstrap 4）：
col-12 col-sm-6 col-lg-3表示：手机单列、平板双列、大屏四列 - 注意
col-*（无断点前缀）对应超小屏（≤575.98px），不是“全局生效”；漏写它，手机下可能意外使用父级 flex 默认行为 - 列数超 12（如两个
col-md-8）会导致第二列掉行——这不是 bug，是栅格设计逻辑，应主动拆分为col-md-6 col-md-6 - 自定义 5 列等非 12 整除需求，必须手写 CSS 覆盖
.col-md-5ths类，不能靠内置类实现
真正容易被忽略的是断点生效范围和类名的“不继承性”：写了一个 row-cols-lg-4，不代表中屏或小屏也按这个逻辑走；它只在 ≥992px 生效，其他尺寸完全不管——这点和 .col-* 的“向下兼容”逻辑相反，初学者最容易在这里卡住。
