Bootstrap 5 中最稳方案是用 row 包裹 col 实现栅格布局，row 必须为 col 直接父级；等宽用 col-6，响应式用 col-md-6；替代自定义 flex 的安全方式是内置工具类如 d-flex、flex-md-row；col-auto 宽度由内容决定，需配合 col 使用；IE11 不兼容 col-auto 和 flex，应降级用 Bootstrap 4 栅格或避免相关类。
用 Bootstrap 5 的 row + col 是最稳的方案
直接套栅格系统，不是“让两个 div 在一行”，而是“把它们放进同一行容器里”。bootstrap 的 row 默认是 flex 布局，子元素（col）天然横向排列。别手动写 display: flex 或 float，容易和响应式断点冲突。
常见错误：只写 col 不包 row，或把 row 套在 container 外面导致左右留白异常。
-
row必须是col的直接父级，否则col的 padding 和负 margin 会失效 - 两个 div 想等宽就都用
col-6；想一宽一窄，比如主内容占 8 份、侧边栏占 4 份，就用col-8+col-4 - 如果屏幕小了要堆叠，加响应式类，比如
col-md-6—— 在md及以上才并排，更小屏幕自动换行
<div class="container">
<div class="row">
<div class="col-6">左边</div>
<div class="col-6">右边</div>
</div>
</div>
用 flex 工具类替代自定义 CSS 更安全
Bootstrap 5 内置了一套 flex 工具类，比手写 style="display:flex" 更可靠，尤其在嵌套或与其他组件混用时。
常见错误：给父容器加 d-flex 后，子元素没设宽度，结果一个撑满、另一个被挤到换行；或者用了 justify-content-between 却忘了子元素本身没设 flex-shrink: 0，导致内容多时被压缩变形。
- 父容器加
d-flex，子元素必须显式控制尺寸，比如w-50（固定 50% 宽）或flex-grow-1（剩余空间均分） - 想左对齐+右对齐，用
justify-content-between；但右边那个 div 如果内容长，建议再加text-nowrap防止文字折行破坏布局 - 移动端要堆叠？加
flex-column flex-md-row—— 小屏列排，中屏起横排
<div class="d-flex flex-md-row flex-column"> <div class="w-50">左侧</div> <div class="w-50">右侧</div> </div>
col-auto 和 col 混用时容易忽略的宽度逻辑
当一边是固定内容（比如按钮、图标），另一边是可变文本时，col-auto 很有用，但它不会自动“让出空间”——它只是不占多余空间，剩下的由其他 col 填充。
常见错误：写成 <div class="col-auto">按钮</div>
<div class="col">长文本</div>，结果按钮太宽、文本被压扁；或者没加 row，col-auto 失效。
-
col-auto的宽度由内容决定，但最大不会超过父容器；若内容超长，它仍会换行，除非加white-space-nowrap -
col（无数字后缀）表示“剩余空间均分”，不是“自动伸缩”；两个col就各占 50%，三个就各占 33.33% - 如果右边需要“尽可能宽”，左边又不能被拉伸，就用
col-auto+col，且确保外层有row
<div class="row"> <div class="col-auto"><button class="btn btn-sm">操作</button></div> <div class="col">这段文字可能很长，会自动占据剩余所有宽度</div> </div>
IE11 兼容性问题：别用 col-*-*auto 或 flex-wrap: wrap 的花哨组合
Bootstrap 5 官方已放弃 IE11 支持，但如果项目还在用，某些 flex 行为会错乱——尤其是 col-auto 在 IE 中可能不收缩，或者 flex-grow 类完全无效。
错误现象：col-6 col-md-4 在 IE 中变成堆叠，或两个 div 重叠在一起。
- 最保险的做法：退回到 Bootstrap 4 的栅格类（
col-md-6等），它基于 float，IE11 支持良好 - 避免用
col-xxl-*这类超大屏断点，IE11 根本不认识xxl - 如果必须用 Bootstrap 5，就别依赖
col-auto和d-flex组合，老实用col-6+col-6并配合flex-md-nowrap
复杂点在于：你得先确认目标环境是否真要兼容 IE11。很多人以为“客户说支持 IE”，实际只是没测试过，上线前务必在真实 IE11 环境跑一遍 layout。
