直接用.container-fluid包裹导航栏即可实现通栏，因其默认width: 100vw、无max-width限制、左右贴边；而.container含max-width和padding，会锁死宽度并留白，导致width: 100%失效。
直接用 .container-fluid 包裹导航栏内容，而不是 .container，就能实现通栏（100% 视口宽度）。
为什么 width: 100% 常常不生效
因为 width: 100% 是相对于父容器计算的。如果你的 <nav></nav> 套在 .container 里，那它的最大宽度就被锁死在断点值（比如 1140px），左右永远有留白。
- 浏览器开发者工具里检查该元素的
computed width，大概率看到的是固定 px 值，不是 100vw -
.container本身带左右 padding 和 max-width，它存在的意义就是“居中+留白”，和“通栏”目标冲突 - 强行给
<nav></nav>加position: absolute; left: 0; right: 0;虽然能撑开，但会脱离文档流，影响后续布局
.container-fluid 是官方推荐的通栏方案
Bootstrap 明确提供了 .container-fluid 类来解决这个问题：它默认设为 width: 100vw、左右贴边，不居中、无断点限制。
- 只管宽度，不干涉高度——所以如果要“全屏导航栏”，还得额外加
min-vh-100或h-100 - 别和
.container混用，哪怕只在某一层嵌套，也会被父级的 max-width 截断 - 适用于顶部通栏导航、全宽轮播、背景色横条等需要横跨整个视口的场景
通栏导航栏必须手动控制高度行为
只设宽度为 100% 远不够。页面内容少时，<nav></nav> 会塌缩成一条线，根本看不出“通栏”效果。
- 加
min-vh-100：内容少时撑满窗口，内容多时自动延展 - 加
vh-100：严格等高（如登录页背景图），但内容溢出会被截断 - 避免
height: 100%：它依赖所有祖先（html、body）都设了height: 100%，否则无效
真正卡住人的地方，往往不是“怎么写类名”，而是没意识到结构层级里藏着一个 .container，或者忘了高度也得显式声明——通栏是宽高两个维度的事，缺一不可。
