row-cols-*类直接作用于.row，控制每行显示列数并自动均分宽度，不依赖子元素数量，且需配合断点类实现响应式（如row-cols-2 row-cols-md-3），内容溢出时需加min-width: 0等防换行处理。
row-cols-1 和 row-cols-md-3 是 bootstrap 5 中控制每行显示列数的响应式工具类，不是设置单个列宽度的类——它们直接作用于 .row，告诉容器“在指定断点下，每行最多排几列”，且自动均分宽度。
row-cols-* 类的实际行为：均分 + 行强制换行
它不关心你放几个 .col 子元素，只管“每行塞满 N 个”。比如：row-cols-md-3 表示：在 md 及以上断点，每行最多显示 3 个等宽列；超出的元素会自动换到下一行。
- 子元素数量可以少于设定值（如只放 2 个
.col），它们仍均分 100% 宽度，剩余空间留空 - 子元素数量多于设定值（如放 7 个
.col），第 4、7 个会强制换行，形成多行布局 - 它不改变
.col的内部结构——你依然可以在每个.col里嵌套.row和其他.col，响应式逻辑照常生效 - 注意：它和
.col-*类共存时，.col-*的宽度优先级更高，但仅影响该列自身；row-cols-*控制的是整行的“列数节奏”
为什么 row-cols-md-3 在小屏下还是单列？
因为 row-cols-md-3 只在 min-width: 768px（即 md 断点起）生效；更小的屏幕（xs、sm）没有对应类，浏览器回退到默认行为：.row 内所有 .col 堆成一列（即等效于 row-cols-1）。
- 若想小屏双列、中屏三列，得显式写全：
row-cols-2 row-cols-md-3 - 别漏掉基础断点类——Bootstrap 不会自动向下兼容，没写的断点就用浏览器默认流式布局
- 检查是否误加了
flex-column或flex-wrap: wrap-reverse等干扰样式，会覆盖row-cols-*的 flex 主轴逻辑
常见错位原因：内容溢出或 min-width 干扰
即使用了 row-cols-md-3，第五个 .col 还是掉到第二行？大概率不是栅格问题，而是内容撑开了列宽，触发了 flex 换行。
- 图片、长单词、未设
max-width: 100%的内联元素，会让.col实际宽度 > 33.333% - 默认
flex-shrink: 1允许压缩，但某些内容（如img）有固有尺寸，压缩失败后只能换行 - 解决方案：给
.col加min-width: 0（Bootstrap 5 默认已设，但自定义样式可能覆盖）；对图片加img-fluid；对文本加text-truncate或overflow-wrap: break-word - 别手动给
.col设width或flex-basis，这会和row-cols-*的计算冲突
和自定义 20% 列宽方案的本质区别
row-cols-* 是基于 Flex 的“行级调度”，而手写 flex: 0 0 20% 是“列级固定”。前者更轻量、语义清晰、天然支持响应式断点切换；后者需自己维护断点媒体查询、gutter 间距、box-sizing 和溢出控制。
- 如果你只是要五等分，
row-cols-5比写一堆.col-1-5类更可靠 - 但如果你需要某列占 20%、另一列占 60%，就得退回
.col-2+.col-6组合，row-cols-*不适用 - 注意：
row-cols-*对 gutter 的处理依赖父.row是否带g-*类，单独加px-2到.col会导致左右不对称
真正容易被忽略的是：这些类只改“每行几列”，不改“列里怎么排”——内容溢出、图片未响应、文本不折行，才是五列变四列+换行的真正元凶，而不是栅格类没写对。
