结论：col-6 col-md-2 正确——xs 下每列占50%宽（一排2列），md+下每列占16.67%宽（一排6列），需父容器为row且避免断点遗漏；更稳用row-cols-2 row-cols-md-6强制每行数量。
Bootstrap 5 中如何用 grid 类控制不同断点的列数
直接说结论：用 col-6 col-md-2 是错的——它会让手机端每行显示 2 列（即 2×6=12），大屏显示 6 列（6×2=12），但实际效果是“手机端一排两列、桌面端一排六列”，前提是每个 col 内容等宽且不换行。关键在理解 Bootstrap 的栅格系统本质：数值代表该列占 12 栅格中的份数，不是“显示几列”本身。
为什么 col-6 col-md-2 能实现目标
因为 Bootstrap 的栅格基于 12 列总宽度，col-6 表示在 xs（所有屏幕，默认）下占 6/12 = 50% 宽度，两个并排就满一行；col-md-2 表示从 md（≥768px）开始，每个列占 2/12 ≈ 16.67%，六个正好填满一行。注意：必须确保父容器是 row，子元素是 col，否则类名无效。
-
col-6在 xs/sm 下生效（≤767.98px），两个col-6自动换行成两列布局 -
col-md-2在 md 及以上生效，六个col-md-2并排占满整行 - 如果内容高度差异大，可能因 float 或 flex 换行错位，建议加
row-cols-2 row-cols-md-6到row上强制统一行为
常见错误：用 col-sm-6 col-lg-2 会出问题
很多人误以为 sm 对应手机、lg 对应大屏，但 Bootstrap 5 的断点是：xs（无前缀）、sm（≥576px）、md（≥768px）、lg（≥992px）。若用 col-sm-6 col-lg-2，则在 768–991px 区间（如平板横屏）会继承 col-sm-6，导致只显示两列而非六列。
- 手机（
xs）：需明确用col-6，否则无默认响应行为 - 避免跨断点遗漏：比如设了
col-sm-6但没设col-md-2，那在 iPad Pro 横屏（1024px）下仍按sm规则执行 - 别混用旧版写法（如
col-xs-6），Bootstrap 5 已移除xs前缀
更稳妥的写法：用 row-cols-* 工具类统一控制
当列内内容高度不一致或需要严格对齐时，col 类容易因 flex wrap 行为导致错行。此时直接作用于 row 的 row-cols-2 row-cols-md-6 更可靠——它强制该 row 下所有子项在对应断点下按指定数量均分（无论内容多少）。
-
row-cols-2：在 xs 下每行最多 2 个子元素 -
row-cols-md-6：在 md+ 下每行最多 6 个子元素 - 不需要给每个子元素加
col类，但子元素仍需是col或其他块级元素（否则可能不生效） - 注意：该方式不控制单个子元素宽度比例，仅控制每行数量；若需等宽，仍要配合
flex-fill或额外样式
真正容易被忽略的是断点边界值和内容溢出——比如图片没设 img-fluid，或者文字过长撑破 col，都会让布局在某些尺寸下失效。测试时至少覆盖 320px、768px、1200px 三个典型宽度，而不是只看 Chrome 模拟器的“iPhone”预设。
