该用 .container 时：需内容居中、两侧留白且响应式固定宽（如手机100%、平板750px/970px、桌面1170px），适用于正文页、表单页；.container-fluid 则用于全视口宽无外边距场景，如导航栏、轮播图。
什么时候该用 .container？
当你需要内容居中、两侧留白，且希望在不同屏幕宽度下自动切换固定宽度（比如手机上占满、平板上缩窄、桌面端稳定在 970px 或 1170px）时，就用 .container。
它本质是「响应式固定宽」：不是死写 width: 970px，而是靠媒体查询动态切换，同时始终用 margin: 0 auto 居中。所以你看到的“留白”，其实是左右外边距随屏幕变大而增大，不是 padding。
- 常见错误现象：把
.container套在全屏 Banner 上，结果 Banner 两侧被切掉或留白难看 - 典型场景：正文文章页、表单页、卡片列表——内容不宜撑满整个视口
- 注意：小于 768px 时，
.container宽度 = 100%，此时和.container-fluid表现一致（只有左右padding: 15px）
什么时候必须用 .container-fluid？
当你需要元素从左到右 100% 占满视口宽度（viewport），且不希望任何外边距干扰布局时，就用 .container-fluid。
它没有媒体查询控制宽度，只设 width: 100%，左右 margin 为 0，但保留 padding: 0 15px（Bootstrap 4+ 后统一为 15px；旧版如 Bootstrap 3 在某些版本里 padding 是 0，需实测）。
- 常见错误现象：用了
.container-fluid却发现内容贴边太紧，没留呼吸感——这时应靠子元素内边距或px-3等工具类补足，而不是换容器 - 典型场景：导航栏、全宽图片轮播、地图容器、后台管理页侧边栏 + 主内容区整体布局
- 注意：它不嵌套
.container，也不该被.container包裹，否则会破坏宽度逻辑
.container 和 .container-fluid 的盒模型差异在哪？
关键不在 width，而在 margin 和断点行为。
.container 的核心是「三档媒体查询 + auto margin」：
– ≥1200px → width: 1170px + margin-left/right 自动计算
– ≥992px → width: 970px
– ≥768px → width: 750px
– ＜768px → width: 100%
.container-fluid 没有这些 media query，只有：width: 100%; padding-right: 15px; padding-left: 15px; margin: 0;
- 性能影响几乎为零，二者都是纯 CSS 类，无 JS 参与
- 兼容性完全一致，所有 Bootstrap 3+ 版本都支持
- 容易被忽略的一点：它们都调用同一个 mixin
make-container()，只是.container额外叠加了宽度断点规则
嵌套或混用会出什么问题？
Bootstrap 明确禁止 .container 和 .container-fluid 相互嵌套——不是不能写，而是布局必然失控。
例如：<div class="container"><div class="container-fluid">...</div></div>，内层会强行拉到 100% 视口宽，突破外层 1170px 限制，导致水平滚动或内容错位。
- 真实报错不会出现，但浏览器渲染结果不可控
- 如果你需要“局部流体 + 局部固定”，应该用非容器级方案：比如
<div class="container"><header class="w-100">...</header></div>，再配合position: relative或负 margin 微调 - 另一个高危操作：在
.container-fluid内直接放.row而不包裹.container——虽然能显示，但.row的margin: 0 -15px会抵消掉容器的 padding，造成子列溢出
.container；要视觉张力或功能型全宽支撑，选 .container-fluid。真正容易翻车的，是忘了它们底层共享同一套 padding/margin 设计逻辑，又在响应式断点交界处（比如 767px / 768px）做像素级对齐假设。 
