使用 <div class="container"> 可创建响应式固定宽度容器，根据断点自动调整最大宽度（如手机全宽、桌面1140px），并居中显示。
直接用 <div class="container"> 包裹内容，就能创建一个随屏幕变宽但有上限的固定宽度容器。它不是“死宽度”，而是在不同设备上自动切换最大宽度（比如手机全宽、桌面限制在1140px），同时居中显示。
container 的响应式逻辑
它不是设死一个像素值，而是按断点阶梯式调整最大宽度：
- 超小屏（
- 小屏（≥576px）：540px
- 中屏（≥768px）：720px（这是
.container默认生效的起点） - 大屏（≥992px）：960px
- 超大屏（≥1200px）：1140px
- 超超大屏（≥1400px）：1320px
也就是说，你写 <div class="container">，Bootstrap 就会根据当前视口宽度，自动选一个合适的 max-width，始终保证内容可读又不撑满全屏。
别和 container-sm 混用
.container-sm 不是“给小屏用的”，而是“从 ≥576px 开始才限制宽度为 540px”。手机竖屏（普遍 ≤428px）根本达不到这个条件，所以它表现和 .container-fluid 一样——100% 宽。误用它反而会让平板或笔记本屏幕内容被卡在窄窄的 540px 里，阅读体验很差。
立即学习“前端免费学习笔记（深入）”；
- 想让所有尺寸都统一窄一点？不能靠加多个 container 类，得单独写 CSS，比如
.container { max-width: 900px; } - 想只在手机上设固定宽度（比如 380px）？Bootstrap 没提供这类类名，需手动加
@media (max-width: 575.98px) { .container { max-width: 380px; } }
和 container-fluid 的区别要清楚
.container-fluid 没有断点逻辑，始终是 width: 100%，左右贴边，适合做通栏 Banner、全宽背景图或仪表盘布局。而 .container 天然带左右 padding，内容居中，更适合正文、表单、卡片列表这类需要呼吸感的常规页面结构。
- 常见组合：
<div class="container"><div class="row"><div class="col">…</div></div></div> - 不要嵌套 container：外层
.container+ 内层.container-fluid会导致内层突破外层约束，破坏布局节奏
调试时看计算值，别只信 class 名
浏览器 DevTools 里检查元素，重点看 Computed 标签页下的 max-width 值。有时候你写了 .container-lg，但当前屏幕宽度是 850px（介于 md 和 lg 之间），实际生效的是 md 断点的 720px，而不是你预期的 960px。只有看清真实计算结果，才能判断是不是选错了断点类。
