导航栏中必须将.container或.container-fluid显式加在<nav>内部包裹内容的<div>上，而非直接加在<nav>标签本身；否则容器的响应式逻辑不生效。
导航栏本身不控制容器宽度，.container 或 .container-fluid 必须显式加在导航栏内部内容上；直接给 nav 元素加 .container 类无效，因为 Bootstrap 导航栏结构默认不继承容器的响应式逻辑。
导航栏里该把 .container 放在哪一层
必须放在 <nav> 内部、且包裹实际导航内容（如 <ul class="navbar-nav"> 或品牌链接）的 <div> 上。常见错误是把 .container 加在 <nav> 标签本身，或漏掉这层包裹。
-
<nav class="navbar navbar-expand-lg"><div class="container"><a class="navbar-brand">...</a><ul class="navbar-nav">...</ul></div></nav>✅ 正确 -
<nav class="navbar navbar-expand-lg container">...</nav>❌ 无效：nav是行内元素语义，.container的max-width和居中逻辑不会自动作用于它 -
<nav class="navbar navbar-expand-lg"><div class="container-fluid">...</div></nav>✅ 可用，但会全宽——若只想限宽，不能只靠container-fluid
为什么导航栏里用 .container-sm / .container-lg 没反应
因为 .container-{breakpoint} 类的生效条件是「屏幕 ≥ 对应断点」，不是「只在该断点下生效」。比如 .container-sm 在手机竖屏（≈390px）下完全不触发，等同于没写；它只在 ≥576px 时才启用 540px 宽度。
- 想让导航栏在小屏也保持固定宽度（如 400px），不能依赖内置类，得手动加：
style="max-width: 400px; margin: 0 auto;" -
.container-lg在 iPad 横屏（≈1024px）下会启用 960px，但不会升到.container-xl的 1140px——除非屏幕 ≥1200px - 检查 DevTools 的 Computed 面板，确认最终生效的
max-width值，别只看 class 名
导航栏全宽但内容要居中限宽，怎么组合
用 .container-fluid 做外层撑满，再用嵌套的 .container 或带内边距的工具类收束内容区域。这是最稳妥的解耦方式。
-
<nav class="navbar navbar-expand-lg"><div class="container-fluid px-4"><div class="container">...</div></div></nav>—— 外层全宽+水平留白，内层按断点限宽 - 避免嵌套两个
.container：会导致左右 padding 叠加、内容被意外压缩 - 如果用
.container-fluid px-0，需确认父级（如<body>）没设max-width或额外padding，否则仍无法真正贴边
自定义导航栏容器宽度的坑
改 .container 宽度会影响整个页面，不只是导航栏。如果你只希望导航栏变宽，而正文保持原样，硬改全局变量或媒体查询是最危险的选择。
- CDN 项目：用媒体查询覆盖时，必须确保自定义 CSS 在
bootstrap.min.css之后加载，且断点值严格匹配版本（v5.3+ 是@media (min-width: 1200px)） - Sass 项目：重定义
$container-max-widths必须在@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前，键名拼错（如xl写成x1）会导致静默回退默认值 - 最容易忽略的是：导航栏里用了
.navbar-collapse，它默认是 flex 容器，若内层.container没设width: 100%或flex: 1，折叠菜单可能错位
