container适用于文字、卡片、表单等需呼吸感的场景，container-fluid用于全屏Banner、地图等需延展的场景；栅格断点类从指定宽度起持续生效，须写全小中大断点避免错位；两栏布局推荐col-auto+col或d-flex+flex-grow-1，禁混用；tab-pane内滚动需结构隔离，避免直接加d-flex。
直接用 container 或 container-fluid + 栅格类就能做，但选错容器或漏写断点前缀，是响应式错位最常踩的坑。
container 和 container-fluid 到底该选哪个
不是“哪个更高级”，而是看内容是否需要呼吸感或全屏延展：
文字为主、卡片居中、表单页 → 用 container；
全屏 Banner、地图、后台数据列表、控制台界面 → 用 container-fluid。container 在小屏下固定留白 1rem，不是失效，是设计如此；
想小屏撑满 + 大屏加最大宽度限制？别硬套，改用 class="container px-0" 配合自定义 max-width: 1400px。
col-md-6 这类断点类怎么写才不翻车
断点类是“最小宽度触发并持续生效”，不是“只在该区间生效”。col-md-6 意味着：从 768px 起生效，且一直生效到更大屏幕，除非被 col-lg-4 这类更高断点覆盖。
常见错误：
- 只写
col-md-6，漏掉col-12→ 小屏下无宽度定义，列塌缩成 auto 宽度 - 写成
col-sm-12 col-md-6，结果 iPad 横屏（1024×768）显示为半宽 → 因为它满足 md 条件，又没写 lg 覆盖，就继续沿用 - 想实现“手机竖屏单列、横屏双列、平板三列”，必须写全：
col-12 col-sm-6 col-md-4
两栏布局：左侧固定、右侧自适应，别碰 col-3+col-9
按百分比分（如 col-3 + col-9）不是“固定+自适应”，是“30% + 70%”，侧边栏内容一变高或加 padding，右侧就容易错位或溢出。
真正稳解只有两个：
-
col-auto+col：左侧由内容自然撑宽，或加style="min-width: 250px; width: 250px;"锚定；右侧用col自动占满剩余空间。注意：二者必须同属一个.row，单独写col-auto无效 -
d-flex+flex-grow-0/flex-grow-1：父容器加d-flex，左侧加flex-grow-0+ 显式宽高约束，右侧只加flex-grow-1。混用col-*和flex-grow会冲突，行为不可控
tab-pane 里加双列滚动？先别碰 d-flex
直接给 .tab-pane 加 d-flex 或 h-100，会破坏 Bootstrap 的 display: none/block 切换逻辑——非激活 tab 仍保持 flex 布局，导致内容右偏、宽度异常、无法左对齐。
正确做法是结构隔离：
- 移除所有
.tab-pane上的d-flex、flex-row等 display 类 - 每个
.tab-pane内部加一层<div class="container-fluid h-100"> <li>再嵌套 <code><div class="row h-100">，两列用 <code>col+d-flex flex-column flex-grow-1 overflow-auto高度穿透和滚动控制必须靠层级继承，不能靠强覆盖 display 属性。
