怎么用Bootstrap实现左右分栏布局-Bootstrap教程-PHP中文网

Bootstrap 5左右分栏需用row包裹col-*组合，禁止单独使用col类；推荐col-md-6实现桌面等宽、小屏堆叠，或col-auto+col实现左侧定宽、右侧自适应，须防高度不一致导致的视觉断层。

怎么用bootstrap实现左右分栏布局

用 Bootstrap 5 的 `row` 和 `col` 实现左右分栏

Bootstrap 5 默认用 Flexbox 实现栅格系统，左右分栏不用浮动或定位，直接靠 row + col 组合就能搞定。关键不是“怎么加类”，而是“怎么选断点”和“怎么防塌陷”。

常见错误是写成

左

右

却没包 row，导致 margin 错乱、宽度溢出或垂直对齐异常。

必须把左右两栏包在 内，否则列的负 margin 和 padding 无法抵消
用 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 的默认行为。

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

加 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 做局部控制。