row-cols-*类直接作用于.row实现每行等宽均分列数，无需改HTML或JS；它与.col解耦，支持响应式断点、多行混用，但需注意继承规则、内容溢出处理及避免与width/Grid混用。
Bootstrap 5 用 row-cols-* 类就能给每行单独设列数，不需要改 HTML 结构或写 JS —— 它直接作用于 .row，不依赖子元素个数，也不影响嵌套。
row-cols-* 是最干净的单行列数控制方式
这个类不是加在 .col 上，而是加在 .row 上，告诉它“本行内所有 .col 必须等宽均分，且总数按该值算”。比如 row-cols-3 表示本行每个 .col 占 1/3 宽度，哪怕你只放 2 个 .col，它们也还是各占 33.33%，后面留空。
-
row-cols-2：每行强制 2 列（各 50%） -
row-cols-md-4：小屏单列，中屏及以上每行 4 列（各 25%） -
row-cols-lg-5：大屏每行 5 列（各 20%），小屏/中屏自动回退为默认单列
它和 .col-* 类完全解耦：子 .col 可以是 .col、.col-md-6，甚至空着，都不影响均分逻辑。
多行不同列数可以混用，但要注意断点继承
同一页面里多个 .row 可以各自带不同 row-cols-*，互不影响。但响应式断点有继承规则：
- 如果某行写了
row-cols-2 row-cols-md-4，那它在md及以上宽度下生效row-cols-md-4，sm及以下用row-cols-2 - 没写断点的
row-cols-*（如row-cols-3）会作用于所有尺寸，覆盖更细粒度的断点类 - 别写
row-cols-3 row-cols-4这种冲突组合——后写的会覆盖前写的，浏览器只认最后一个
常见错误：row-cols-3 row-cols-sm-6 在小屏下实际是 6 列，但若中间漏了 md 断点，中屏可能意外沿用 sm 的 6 列，导致内容过窄。
内容溢出时容易换行，得加 min-width: 0 控制
row-cols-* 底层靠 Flex 的 flex: 1 1 0 实现等分，但当某个 .col 里有长单词、URL 或未约束的图片时，Flex 项会撑开，触发换行 —— 第五行掉到第二行就是这么来的。
- 在
.col内部加min-width: 0（可用mw-0工具类）阻止拉伸 - 对文本容器（如
<p>）加word-break: break-word（对应text-break类） - 图片必须加
img-fluid，否则破坏等宽计算
注意：row-cols-* 不处理列间距（gutters），要统一加 g-3 等类到 .row 上，别在 .col 里手动加 px-2 —— 会和 gutter 冲突。
别和自定义 width: 20% 或 grid 混用
row-cols-5 和手写 width: 20% 自定义类不能共存于同一 .row：前者靠 Flex 主轴分配，后者靠静态宽度，在 flex 容器里会被重算，结果不可控。
- 已用
row-cols-*就别再给.col加d-flex、flex-column等布局类 —— 容易干扰主轴流 - 如果需要瀑布流或多行高度对齐，
row-cols-*不够用，该切 CSS Grid（如g-cols-5 gap-3），但它和 Bootstrap 栅格不兼容，必须整行替换 - 移动端列数少于桌面端时，确保内容在小屏下仍可读 ——
row-cols-5在手机上变成单列后，文字不能挤成一团，需配合fs-6或text-wrap
真正难的不是设列数，而是让不同列数的行在视觉节奏上一致：字体大小、间距、卡片圆角这些细节不统一，再多的 row-cols-* 也救不回割裂感。
