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 管的是“这一行最多显示几列”，内容超了会自动换行（类似 CSS grid-template-columns: repeat(2, 1fr)）
• col-6 管的是“这个元素占多少格”，不处理换行逻辑，得靠父 row 的 flex 换行行为或手动加 flex-wrap
• row-cols-2 对子元素无 class 要求：哪怕子元素是 <div>、<code><p></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 前缀的版本。

  解决办法：

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载
  • 要全尺寸（包括 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"> <li>如果内容项高度不一致，<code>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 的换行是基于“剩余空间”。前者更适合卡片流布局，后者更适合表单字段对齐。