根本原因是.container自带固定宽度和左右15px padding，嵌套时内层容器的width+30px padding超出外层容器最大宽度，触发横向溢出；且无box-sizing:border-box修正，padding无法被margin抵消，居中逻辑失效。
Container 不能嵌套的根本原因：padding 和 width 的双重挤压
Bootstrap 的 .container 类自带左右各 15px 的 padding，同时在不同断点下设定了固定宽度（如 970px、1170px）。当你把一个 .container 套在另一个里面时，外层容器的 width 已经无法容纳内层容器的 width + 30px padding，浏览器会强制撑开或触发横向滚动条。
这不是语义错误，而是 CSS 盒模型的必然结果——没有额外的 box-sizing: border-box 修正，padding 就是加在 width 外面的。
-
.container的padding不可被子元素的margin抵消（不像.row那样设计了-15px来对齐） - 嵌套后，内层
.container的居中逻辑（margin: 0 auto）会在已被压缩的宽度上再次计算，导致视觉偏移 -
.container-fluid同样不能嵌套进.container，因为它的100%宽度会突破父级约束，而它的15px padding依然存在
为什么 .container-fluid 和 .container 也不能互相嵌套
文档里写的“不能互相嵌套”，不是风格建议，是样式冲突的硬性限制。两者都带 15px 左右 padding，且都没有为嵌套场景预留重置机制。
典型错误写法：<div class="container"><div class="container-fluid">...</div></div> —— 内层 .container-fluid 的 100% 宽度按外层 .container 的内容区（比如 1140px）计算，再加自身 30px padding，实际占用 1170px，但外层容器最大宽度就是 1170px，于是右边溢出 30px。
立即学习“前端免费学习笔记（深入）”；
- 所有 Bootstrap 容器类都假设自己是布局最外层的“版心”控制者，不提供
padding清除 API - 嵌套时，
max-width和padding叠加效应不可逆，CSS 里没有 “undo padding” 这回事 - 哪怕用
!important强行覆盖内层padding，响应式断点下的width仍会错位
和 BEM 规范无关，是栅格系统自身的结构契约
BEM 是命名方法论，不约束 DOM 层级；而 Bootstrap 的 .container → .row → .col-* 是运行时依赖链。你完全可以用 BEM 命名写 block__container，但只要它没按 Bootstrap 的三层嵌套来组织 DOM，栅格就失效。
换句话说：BEM 解决的是“怎么起名”，Bootstrap 解决的是“怎么排布”。混淆这两者，容易误以为“只要 class 名符合 BEM，嵌套就安全”，其实完全不是。
- 错误认知：“我用
myapp-layout__container替代.container就能嵌套”——不行，class 名变了，但缺失15px padding和断点max-width，整个栅格基础就塌了 - 真正要兼容 BEM 的做法是：在外层用标准
.container，内部组件用 BEM 命名，比如<div class="container"><div class="row"><div class="col"><article class="card card--featured">...</article></div></div></div> - 强行把 BEM 思维套进容器层级，比如写
<div class="layout layout--fluid"><div class="layout__container">，只会让维护者更难识别哪些是 Bootstrap 必需结构
真要嵌套内容区域？用 .row 或自定义 class 替代
如果你需要视觉上“像容器一样居中+留白”，但又必须放在已有 .container 内部（比如后台菜单下的子模块），别碰嵌套容器，改用更轻量、无宽度约束的方案：
- 直接用
.row：它有-15px margin抵消父级padding，天然适配内部缩进，且不设max-width - 加一层
<div class="px-3">：用 Bootstrap 工具类手动控制内边距，比复制.container行为更可控 - 写一个极简自定义 class：
.sub-section { max-width: 1140px; margin: 0 auto; padding: 0 15px; }—— 明确避开.container的断点逻辑，只复用你需要的居中+留白
最常被忽略的一点：Bootstrap 的容器类不是“通用居中工具”，而是栅格系统的锚点。一旦脱离 .row 和 .col-* 的配合，它的价值就只剩下一个带断点的 max-width，而这完全可以手写几行 CSS 替代。
