Bulma navbar 错位主因是错误将整个 navbar 套入 container，破坏其 flex 布局与响应式逻辑；正确做法是在 navbar-brand 或 navbar-menu 内部使用 container（推荐加 is-fluid 或用 navbar-item 包裹），并确保 navbar-burger 与 navbar-menu 同级且 id 匹配。
使用 Bulma 的 navbar 时，如果和 container 一起用出现错位（比如导航栏左右撑满、内部元素居中偏移、响应式折叠异常），核心问题通常是容器嵌套逻辑或 Bulma 自带的内边距/宽度控制冲突导致的。Bulma 的 navbar 默认已包含完整的布局结构（含 navbar-brand、navbar-menu 等），**不应直接把整个 navbar 套在 container 里**，否则会破坏其内置的 flex 布局与断点行为。
避免将 navbar 整体包裹在 container 中
Bulma 的 自定义 CSS 中若写了类似 立即学习“前端免费学习笔记（深入）”； Bulma 要求 navbar 本身是全宽设计，靠内部子元素（如 navbar-brand 和 navbar-menu）配合 container 实现内容居中。正确做法是：只在需要居中的部分（如 logo 和菜单项）内部使用 container，而不是把 包进
确保 navbar-menu 内部使用 container 时保留 flex 容器特性
navbar-menu 是 flex 容器（display: flex），若直接在它里面加 container，而没处理好 flex 项目的行为，可能让菜单被压缩或换行。建议给 container 添加 is-fluid 类，或用 navbar-item 包裹 container 来维持对齐。
is-fluid 让 container 适配 flex 宽度：
navbar-item 包一层再放 container：
检查是否意外覆盖了 Bulma 的默认样式
.navbar { width: 100%; max-width: 1280px; margin: 0 auto; } 或给 navbar-brand 设了 flex: 1，很容易破坏原有响应式逻辑。Bulma 的 navbar 在移动端依赖 navbar-burger 和 is-active 控制显示隐藏，一旦父容器宽度受限或 flex 分配异常，汉堡菜单就无法正常展开。
has-shadow、is-transparent）扩展样式，而非重写布局属性.navbar-menu 是否被设为 display: none 或 height: 0（常见于 JS 未触发 is-active）移动端折叠菜单错位？重点检查 navbar-burger 和 navbar-menu 的父子关系
navbar-burger 和 navbar-menu 必须同级且在同一 navbar 下，否则 JS 切换 is-active 时找不到目标。错位常表现为点击汉堡后菜单不展开、或展开后位置偏移（如从顶部下拉却出现在右侧）。
data-target 的值必须严格匹配 navbar-menu 的 id
