row-cols-2 是 Bootstrap 5+ 的行级列数控制类，使整行子元素自动等宽分为2列；col-6 是列级宽度类，需每个子元素单独设置且总和为12才稳定等宽。
row-cols-2 是什么，和 col-6 有什么区别
row-cols-2 是 Bootstrap 5+ 提供的「行级列数控制类」，直接加在 row 上，表示该行内所有子元素（无论是否带 col 类）自动按 2 列等宽排列。它不关心子元素有没有写 col，也不依赖子元素数量总和为 12。
而 col-6 是「列级宽度类」，必须每个子元素单独加，且需满足“同一行下所有 col-* 数字之和为 12”才稳定等宽；若只写 col-6 但只有两个子项，它只是“占一半宽度”，不是“强制两列布局”——这点常被混淆。
关键差异：
-
row-cols-2管的是“这一行最多显示几列”，内容超了会自动换行（类似 CSSgrid-template-columns: repeat(2, 1fr)） -
col-6管的是“这个元素占多少格”，不处理换行逻辑，得靠父row的 flex 换行行为或手动加flex-wrap -
row-cols-2对子元素无 class 要求：哪怕子元素是<div>、<p>或没写任何col类，也能生效
为什么加了 row-cols-2 还是一列堆叠
常见错误现象：<div class="row row-cols-2"><div>A</div><div>B</div></div> 在小屏下仍垂直堆叠，不是左右并排。
根本原因：row-cols-2 默认只在 ≥576px（sm 断点）生效，它的完整类名其实是 row-cols-sm-2。Bootstrap 源码中，未带断点前缀的 row-cols-* 实际不存在 —— 所有文档里写的 row-cols-2 都是简写，真实生效的是带 sm 前缀的版本。
解决办法：
- 要全尺寸（包括 xs）两列等宽，必须显式写
row-cols-2（Bootstrap 5.3+ 支持），或降级兼容写法：row-cols-2 row-cols-sm-2 row-cols-md-2 - 检查是否漏了
container或container-fluid包裹 —— 虽然row-cols不强依赖容器，但没容器时视口过窄会导致列宽不足，触发 flex 换行 - 确认子元素没设
width: 100%、display: block强制撑满，或min-width过大导致无法并排
row-cols-2 和 gap、flex-wrap 的关系
row-cols-2 本身不控制间距，它只设置列数；视觉上“不等宽”或“错位”，大概率是 gap 或 flex-wrap 干扰。
默认情况下，Bootstrap 5+ 的 row 自带 gap: 1rem（即 g-3），这个间隙会占用空间，导致两列内容区实际宽度 ≠ 50%。
实操建议：
- 要去掉间隙干扰，给
row加g-0：<div class="row row-cols-2 g-0"> - 如果内容项高度不一致，
row-cols-2下的子项默认align-items: stretch，但若父row高度受限，可能引发截断 —— 此时可加h-100到子项，或对内容容器加min-height: 0防 flex 项目不收缩 -
row-cols-2自动启用flex-wrap: wrap，所以当子项超过 2 个时，第 3 个会换到下一行 —— 这是预期行为，不是 bug
什么时候该用 row-cols-2，而不是 col-6
选 row-cols-2 的典型场景：
- 动态渲染列表（如 Vue/React 映射数组），你不知道最终有几个子项，但希望“每行最多 2 个”，且保持等宽
- 子元素结构不统一（有的带
col，有的没写），又想快速统一列数 - 需要响应式列数切换，比如
row-cols-1 row-cols-md-2 row-cols-xl-3，比逐个改每个col类更简洁
选 col-6 的典型场景：
- 需要精确控制某一项跨列（如广告 banner 占满整行），此时必须混用
col-12和col-6 - 要配合 offset、order 等高级栅格功能，
row-cols-*不支持这些修饰 - 项目已用 Bootstrap 4（不支持
row-cols-*），只能退回到col-6+row手动管理
最易被忽略的一点：row-cols-2 的换行是基于“项数”，不是“内容宽度”；而 col-6 的换行是基于“剩余空间”。前者更适合卡片流布局，后者更适合表单字段对齐。
