Bulma 导航栏小屏下需手动添加 JavaScript 控制汉堡菜单展开：监听 navbar-burger 点击事件，通过 data-target 切换对应 navbar-menu 的 is-active 类；其 Flexbox 布局已封装对齐逻辑，勿额外设置 justify-content；默认折叠断点为 1024px，可重定义 $navbar-breakpoint 调整；下拉菜单依赖 navbar-item 的 position: relative，需避免样式覆盖导致定位失效。
导航栏在小屏下自动折叠成汉堡菜单，但点击没反应？
Bulma 的 navbar 本身不带 JavaScript 行为 —— 它只提供结构和样式。所谓“点击展开”必须自己补上逻辑，否则 navbar-menu 在移动端永远是隐藏的。
常见错误是只写了 HTML 结构，漏掉控制 is-active 类切换的脚本：
<div class="navbar-burger" data-target="navMenu"> <span></span> <span></span> <span></span> </div> <div id="navMenu" class="navbar-menu"> <a class="navbar-item">Home</a> </div>
需要手动监听点击并切换 is-active：
- 给
navbar-burger绑定click事件 - 用
dataset.target找到对应navbar-menu - 对两者同时添加/移除
is-active类（Bulma 依赖这个类控制显隐）
Flexbox 布局让左右对齐变得简单，但别乱加 justify-content
Bulma 的 navbar 内部已用 Flexbox 实现主轴分布：navbar-start 左对齐、navbar-end 右对齐，本质就是 justify-content: flex-start 和 justify-content: flex-end 的封装。
立即学习“前端免费学习笔记（深入）”；
如果你额外在 navbar-menu 上设 justify-content: space-between，反而会破坏默认行为 —— 因为 navbar-menu 是个 flex 容器，它的子项（navbar-start / navbar-end）才是真正的内容区。
- 想让 logo 居中、菜单靠边？把 logo 放进
navbar-brand，菜单放navbar-start或navbar-end - 需要三段式布局（左 logo + 中搜索 + 右按钮）？用
navbar-item+ml-auto/mr-auto微调，而非重写 justify - 所有对齐逻辑都应基于 Bulma 提供的语义类，避免直接操作 flex 属性
响应式断点不是写死的，但 Bulma 默认只在 1024px 切换
Bulma 的 navbar 折叠临界点由 $navbar-breakpoint Sass 变量控制，默认是 1024px（对应 desktop 断点）。这意味着在 iPad Pro 横屏（1024px 宽）下，菜单仍显示为展开态，而部分安卓平板竖屏（如 800px）才触发折叠。
如果你的用户大量使用 768–900px 区间的设备，这个默认值就不够细粒度：
- 修改方式：重定义
$navbar-breakpoint后重新编译 Sass，或覆盖 CSS 媒体查询 - 注意：Bulma 的
navbar-menu隐藏规则绑定在@media screen and (max-width: $navbar-breakpoint - 1)，所以改变量时要同步检查减法是否合理 - 不建议用
!important硬覆盖 display，容易和is-active类冲突
自定义下拉菜单时，navbar-dropdown 的定位依赖父级 relative
Bulma 的下拉菜单（navbar-dropdown）用的是绝对定位，但它依赖最近的相对定位祖先 —— 正常情况下是 navbar-item，而后者默认有 position: relative。
一旦你给 navbar-item 加了 flex 相关样式（比如 align-items: center），某些浏览器可能意外清除其定位上下文，导致下拉菜单飞走。
- 确保
navbar-item未被设为position: static或position: unset - 如果用了自定义包裹元素（比如
<div class="my-wrapper"></div>），需手动加position: relative - 下拉菜单宽度默认继承父级，若需铺满视口，得单独设
width: 100vw并处理左右偏移
Flexbox 确实省去了 float 清除和 inline-block 间隙的麻烦，但 Bulma 的响应式导航栏不是“开箱即用”，它把交互、断点、定位这些关键链路留给了开发者自己闭环。最容易被忽略的，其实是那个连 JS 都没配的 navbar-burger —— 它看起来像组件，实际只是个带 data 属性的按钮。
