.container用于响应式居中布局，依断点设max-width（如≥1200px为1170px），小屏自动缩至100%；.container-fluid始终width:100%，无外边距，适合全屏场景。
如果您在使用 Bootstrap 构建页面时发现内容布局错位、宽度异常或响应行为不符合预期，很可能是对 .container 与 .container-fluid 的适用场景和内在机制理解不足。以下是二者在实际布局中的核心差异及各自特性分析：
一、.container 的定位与行为特征
.container 是一个具备响应式断点控制的居中容器，其本质是通过媒体查询动态设定 max-width 值，并配合 margin: 0 auto 实现水平居中，从而在不同视口宽度下维持可读性与视觉平衡。
1、当视口宽度 ≥1200px 时，.container 的最大宽度为 1170px；
2、当视口宽度 ≥992px 且 970px；
3、当视口宽度 ≥768px 且 750px；
4、当视口宽度 100%，仅保留左右 15px 内边距。
二、.container-fluid 的定位与行为特征
.container-fluid 是一个无断点限制的流体容器，它始终以 width: 100% 占满整个视口宽度，不设置左右外边距，适用于需严格贴边、全宽延展的布局区域。
1、无论视口多宽或多窄，.container-fluid 的宽度恒为 100vw（减去默认 15px 左右内边距）；
2、它不依赖任何媒体查询调整宽度，因此不具备内容宽度收敛能力；
3、内部子元素（如 .row）仍需遵循 Bootstrap 栅格系统规则，否则可能因缺乏约束导致溢出；
4、在小屏设备上若未配合 overflow-x: hidden 或子元素截断处理，易引发横向滚动条。
三、.container 的典型优势与局限
该容器保障正文区域在大屏下不过宽、小屏下不挤压，显著提升文字阅读舒适度与界面一致性，是内容型页面（如文章页、表单页）的首选。
1、优势在于自动适配主流断点，开发者无需手动编写媒体查询；
2、居中逻辑稳定，避免因父级样式污染导致偏移；
3、与 Bootstrap 栅格系统深度耦合，.row 直接嵌套即可获得正确负外边距抵消；
4、局限在于无法用于需全宽覆盖的组件（如顶部导航栏、全屏轮播图），强行使用会导致两侧留白破坏设计完整性。
四、.container-fluid 的典型优势与局限
该容器提供无干扰的视口级宽度控制，适合构建背景色贯穿、边缘对齐或需要绝对宽度控制的模块，例如 Banner 区、页脚通栏、数据看板头部。
1、优势在于宽度确定性强，不受断点规则约束，便于与自定义 CSS 配合；
2、支持任意嵌套层级下的全宽延伸（只要父级未设 overflow: hidden）；
3、局限在于缺乏天然的阅读宽度控制，在超宽屏幕下可能导致单行文本过长、按钮间距失衡；
4、若误将其作为全局最外层容器并嵌套 .container，会因 margin 和 padding 叠加引发不可预测的盒模型偏差。
五、嵌套与组合使用的边界约束
Bootstrap 明确禁止 .container 与 .container-fluid 相互嵌套——这不是语法错误，而是布局逻辑冲突：前者依赖断点 + auto margin，后者依赖无 margin + 100% width，叠加将导致宽度计算失效、居中丢失、内边距重复。
1、.container 内部不应包裹 .container-fluid；
2、.container-fluid 内部不应包裹 .container；
3、若需局部流体+局部固定，应采用同级并列结构，例如：一个 .container-fluid 放置 Banner，紧随其后一个 .container 放置正文；
4、所有容器均不设置 height，高度完全由子内容撑开；如需最小高度，请额外添加 min-height 类或自定义样式。
