Bootstrap 5左右分栏需用row包裹col-*组合，禁止单独使用col类；推荐col-md-6实现桌面等宽、小屏堆叠，或col-auto+col实现左侧定宽、右侧自适应，须防高度不一致导致的视觉断层。
用 Bootstrap 5 的 row 和 col 实现左右分栏
Bootstrap 5 默认用 Flexbox 实现栅格系统，左右分栏不用浮动或定位，直接靠 row + col 组合就能搞定。关键不是“怎么加类”，而是“怎么选断点”和“怎么防塌陷”。
常见错误是写成 <div class="col-6">左</div>
<div class="col-6">右</div> 却没包 row，导致 margin 错乱、宽度溢出或垂直对齐异常。
- 必须把左右两栏包在
<div class="row"> 内，否则列的负 margin 和 padding 无法抵消 <li>用 <code>col-6是移动端也等宽，如果希望桌面端等宽、小屏堆叠，改用col-md-6 - 如果左侧固定宽度（比如 200px）、右侧自适应，别硬塞栅格，改用
col-auto+col组合
左侧定宽 + 右侧自适应的写法
纯栅格做不了像素级固定宽，但 col-auto 能让内容撑开宽度，col（无后缀）会自动填满剩余空间——这才是 Bootstrap 5 推荐的“伪定宽”方案。
<div class="row"> <div class="col-auto bg-light p-3">导航</div> <div class="col bg-dark text-white p-3">主内容区</div> </div>
注意：col-auto 宽度由内容决定，如果内容为空或太短，可能缩成一条线；加 min-width: 200px 或用 col-md-2 等栅格类更可控。
-
col-auto不响应式，小屏下仍保持内容宽度，容易挤出横向滚动条 - 想小屏时变成上下堆叠？加
col-md-auto col-md-2这类组合类 - 右侧用
col而非col-10，避免在不同屏幕下算错列数
避免左右高度不一致导致的布局断裂
左右两栏内容高度差异大时，row 默认按 flex-start 对齐，看起来像“断层”。这不是 bug，是 Flexbox 的默认行为。
- 加
align-items-stretch到row（默认已启用，一般不用显式写） - 如果用了
col-auto或设置了height，flex 项可能脱离拉伸逻辑，此时给row加style="height: 100%"并确保父容器有高度 - 真要严格等高，别依赖栅格，用
vh或 JS 补齐——Bootstrap 的栅格不负责跨列高度同步
Bootstrap 4 和 5 在分栏上的关键区别
如果你从 4 升级到 5，最常踩的坑是 col-xs- 消失了，以及 offset- 类行为变化。
- Bootstrap 5 删除了
xs前缀，col-6就是“始终 6 列”，不是“仅 xs 下” -
offset-md-2在 v5 中仍有效，但若同时用col-auto，偏移可能失效——因为col-auto不参与列计算 - v5 默认禁用浮点数栅格（如
col-6.5），需手动开启 Sass 变量，生产环境不建议
真正难的不是写对类名，是理解哪些情况该放弃栅格，转而用 flex 工具类（比如 d-flex flex-column）或 CSS Grid 做局部控制。
