最稳方案是container+row+col组合，三列需明确设col-类（如col-3/col-6/col-3），总和为12；固定侧栏用col-auto+col；避免justify-content-between导致响应式错位。
用 container + row + col 组合是最稳的方案
Bootstrap 的栅格系统本身不提供“左中右”这种语义化布局类，必须靠 row 内部三个 col 列按比例分配实现。别想用 justify-content-between 简单撑开——那在响应式下极易错位或换行。
推荐写法是明确指定三列宽度，例如均分时用 col-4（每列占 4/12），或按需设为 col-3 / col-6 / col-3：
<div class="container">
<div class="row">
<div class="col-3">左侧</div>
<div class="col-6">中间</div>
<div class="col-3">右侧</div>
</div>
</div>
-
col-类必须放在row的直接子元素上，嵌套一层div就会失效 - 总列数加起来最好等于 12，否则可能触发换行（尤其小屏幕下）
- 如果内容高度不一致，
row默认用 flex 布局对齐顶部，要垂直居中得加align-items-center
需要固定宽度侧栏？用 col-auto + col 更灵活
当左侧导航栏或右侧工具栏宽度固定（比如 200px），而中间内容要自适应时，col-* 的百分比划分就不够用了。这时应混合使用 col-auto 和 col（等价于 col-12 的弹性伸缩版）：
<div class="row"> <div class="col-auto"><nav style="width: 200px;">菜单</nav></div> <div class="col">主内容区（自动填满剩余空间）</div> <div class="col-auto"><aside style="width: 160px;">侧边栏</aside></div> </div>
-
col-auto会让列宽由内容撑开，col则吃掉所有剩余空间 - 注意：
col-auto在小屏幕上可能被压缩变形，必要时配合min-width或媒体查询限制 - 不要给
col加width，它依赖 flex 的flex: 1行为，硬设 width 会破坏自适应
遇到 col 换行或错位？先检查父容器和断点
常见现象是三列在桌面端正常，一缩小浏览器就变成上下堆叠，或者中间列突然跑到下一行。这不是 Bug，而是 Bootstrap 的响应式断点规则在起作用。
- 确保外层有
container或container-fluid——没它的话row的负 margin 会出问题 -
col-*是“始终生效”，col-md-*是“≥768px 才生效”，混用时注意断点一致性（比如全用col-md-4而不是一半col-4一半col-md-4） - 检查是否意外触发了
flex-wrap: wrap：当三列总宽超 100%（比如加了 padding/margin 又没用box-sizing: border-box），就会换行
要不要用 justify-content-between？谨慎
有人试过给 row 加 justify-content-between，只放两个 col（左、右），中间用空 div 占位。这在静态页面看似可行，但隐患明显：
- 空
div无法响应式隐藏，小屏下仍占位置，挤压内容 - 中间区域无法设置背景、边框或内边距，样式控制力弱
- SEO 和可访问性差——中间是“视觉占位”，不是真实结构
- 若后续要往中间加组件（比如搜索框），就得改 DOM 结构，不如一开始就三列清晰
真正需要“左右锚定、中间流体”的场景，优先走 col-auto + col 路线；真要靠 flex 对齐，也建议用独立的 div 包裹并手动设 display: flex，别强扭 Bootstrap 栅格。
最易被忽略的一点：Bootstrap 5 默认启用 box-sizing: border-box，但如果你项目里重置过全局样式，务必确认这一条没被覆盖——否则 padding 会让列宽溢出，直接导致换行。
