.container有断点max-width限制宽度保可读性，.container-fluid始终100vw撑满视口；前者居中靠auto外边距，后者需防小屏溢出；断点容器如container-md仅大屏全宽，非为小屏优化。
container 和 container-fluid 的核心区别是什么
它们本质是两种宽度策略：一个“有边界”，一个“无边界”。.container 不是固定像素宽，而是在每个断点（如 sm、md）设了 max-width，比如在 lg 屏下是 max-width: 992px，小屏自动缩窄；.container-fluid 则永远是 width: 100vw，贴着浏览器左右边缘走。
- 用
.container是为了防止文字行过长（超过 80 字符可读性骤降），也避免大屏上内容被拉得太开 - 用
.container-fluid多见于全屏轮播、地图容器、后台数据看板这类需要撑满的场景 - 别把
.container-fluid当“更高级”——它不会帮你响应式换行或对齐，反而容易让内层.row在超小屏上溢出横向滚动条
为什么加了 container 页面还是没居中
常见错因不是类名写错，而是嵌套层级或 CSS 干扰。Bootstrap 的居中靠的是 margin-left: auto; margin-right: auto;，前提是父容器没限制宽度、也没 float 或 position: absolute 破坏文档流。
- 检查是否意外把
.container放在了display: flex的父容器里——Flex 容器会忽略auto外边距 - 确认没全局重置了
body的margin或加了box-sizing: border-box导致计算偏差（虽然 Bootstrap 5 默认已处理，但自定义 CSS 可能覆盖） - 最简验证法：
<div class="container"><div style="background:red;height:20px;"></div></div>
看红色块是否水平居中且左右留白
container-sm / container-lg 这类断点容器怎么选
这是 Bootstrap 5 新增的“条件宽度”容器，只在 ≥ 指定断点时才变 100% 宽，比 .container-fluid 更精细。但它不是“适配小屏”，恰恰相反：它是为「大屏才铺开」设计的。
-
.container-md：≤md（992px）时按默认.container规则缩放；≥ 992px 时直接width: 100% - 适合做后台系统：小屏保留安全边距，大屏显示器上让表格/表单充分利用宽度
- 注意兼容性：IE11 不支持该类，如果项目还需兼容，得回退到 JS 动态切换类名
- 别和栅格列混用——
.container-lg本身不提供栅格能力，仍需配合.row+.col才能分栏
容器里要不要再套一层 div？
绝大多数情况不需要。Bootstrap 的容器本身只是个带 max-width 和 margin: auto 的 <div>，没有 padding、背景或边框。如果你看到别人多套了一层，大概率是为了加 padding（比如顶部留白）或独立控制背景色/阴影。
- 想统一内边距？直接给
.container加class="p-4"，别额外包壳 - 要不同区块不同背景？用
<section class="bg-light"><div class="container">...</div></section>，背景挂在外层语义标签上 - 最容易被忽略的一点：容器类必须直接包裹内容，不能隔着
<header>或<main>——否则响应式max-width会失效（因为样式未命中）
