该用 .container 时是需内容居中、两侧留白且自动适配不同屏幕宽度；它通过媒体查询动态设定 max-width：≥1200px 为 1170px，≥992px 为 970px，≥768px 为 750px。
什么时候该用 .container？
当你需要内容居中、两侧留白，且在不同屏幕宽度下自动切换固定最大宽度时，就用 .container。它不是“死宽度”，而是靠媒体查询动态设定 max-width：比如 ≥1200px 时是 1170px，≥992px 是 970px，≥768px 是 750px，padding: 15px）。
常见错误现象：.container 在小屏上“没留白”或“撑不满”，其实是预期行为——它本就不该在手机上留外边距，只靠内边距控制呼吸感。
- 适用场景：正文区域、表单页、卡片列表、文章详情页
- 不要手动覆盖
width或max-width，否则会破坏响应逻辑 - 注意：Bootstrap 5 中
.container默认启用width: 100%+ 媒体查询max-width，不是直接写死像素值
什么时候必须用 .container-fluid？
当你需要元素从左到右 100% 占满视口，且不能容忍任何左右外边距干扰时，才用 .container-fluid。它没有媒体查询控制宽度，只有 width: 100%、margin: 0 和固定的 padding: 0 15px（Bootstrap 4+ 统一为 15px，旧版需实测）。
容易踩的坑：.container-fluid 套在 .container 里，或反过来嵌套——Bootstrap 明确禁止容器类互相嵌套，会导致 padding 叠加、布局错位。
- 适用场景：顶部导航栏、全宽轮播图、地图容器、后台整体主-侧布局外层
- 如果发现内容紧贴浏览器边缘却仍有空白，先检查父级是否意外带了
body或html的默认 margin/padding - 它不“响应式缩放宽度”，只是始终填满 viewport；所谓“响应”，仅体现在内部子元素（如
.row）对栅格系统的适配
.container 和 .container-fluid 的底层差异在哪？
二者都调用同一个 Sass mixin make-container()，负责居中（margin: 0 auto）、左右内边距（padding-right/padding-left）和清除浮动。关键区别在于：.container 额外叠加了一组媒体查询断点规则，而 .container-fluid 没有。
这意味着：你无法通过修改单一 CSS 变量让 .container 变成流体——它的断点逻辑硬编码在框架样式中；而自定义流体容器，更稳妥的方式是复制 .container-fluid 规则并调整 padding，而非魔改 .container。
- Bootstrap 3 中
.container-fluid的 padding 曾为 0，升级到 4+ 后统一为 15px，迁移时要注意视觉偏移 - 它们都不设
height，高度完全由子内容决定；若需最小高度，请额外加min-height - 别依赖「看起来一样」做判断——在 767px 宽度下两者视觉接近，但盒模型结构不同（前者有
margin，后者为0）
嵌套或混用会出什么问题？
官方文档明确禁止 .container 与 .container-fluid 相互嵌套。一旦嵌套，padding 会叠加（比如 .container-fluid 里套 .container，小屏下出现 30px 左右的意外左右空白），且 margin: 0 auto 与 margin: 0 冲突，导致居中失效。
真实调试中常遇到：开发者想“局部流体+局部固定”，结果套两层容器，最后用负 margin 强行修正——这说明结构设计错了，应改用单层容器 + 自定义 class 控制子区域宽度。
- 正确做法：用一个外层
.container-fluid包住全页，内部用.container控制正文宽度 - 错误做法：把
.container-fluid当作“大号.container”来用，以为只是“更宽一点” - 最易被忽略的一点：它们影响的不是“内容怎么排”，而是“内容在视口中的定位基准”——选错容器，后续所有栅格（
.row/.col）的左右对齐都会偏移
