Bulma导航栏：如何设置小屏navbar-menu下拉菜单的样式？

确实，Bulma默认的移动端navbar-menu展开后是全屏宽度的，要修改这个样式其实很简单，只需要添加自定义CSS覆盖默认样式就行。下面给你两种常用的解决方案：

方案一：设置固定窄宽度 #

如果你想让菜单保持一个固定的窄宽度（比如300px），可以针对移动端断点下的激活状态菜单做样式调整：

首先，你的基础HTML结构大概是这样的（标准Bulma navbar结构）：

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="your-logo.png" alt="Logo">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Home</a>
      <a class="navbar-item">About</a>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">Sign up</a>
          <a class="button is-light">Log in</a>
        </div>
      </div>
    </div>
  </div>
</nav>

然后添加自定义CSS，针对移动端（Bulma的移动端断点是max-width: 1023px）：

@media screen and (max-width: 1023px) {
  .navbar-menu.is-active {
    /* 设置固定宽度 */
    width: 300px;
    /* 让菜单靠右对齐，可选 */
    margin-left: auto;
    /* 保留背景色，和默认一致 */
    background-color: white;
    /* 避免内容溢出时撑满屏幕，添加滚动 */
    max-height: calc(100vh - 3.25rem);
    overflow-y: auto;
    /* 给菜单加个边框，区分内容 */
    border-left: 1px solid #eaecef;
  }
}

方案二：让宽度适配菜单内容 #

如果想让菜单宽度自动适配里面的内容，不需要固定值，可以用fit-content来设置宽度：

@media screen and (max-width: 1023px) {
  .navbar-menu.is-active {
    /* 宽度适配内容 */
    width: fit-content;
    /* 同样可以调整位置，比如靠右 */
    margin-left: auto;
    /* 限制最大宽度，避免内容太长时撑满屏幕 */
    max-width: 90vw;
    background-color: white;
    overflow-y: auto;
    border-left: 1px solid #eaecef;
  }

  /* 可选：让菜单里的navbar-item不换行，保持内容紧凑 */
  .navbar-menu.is-active .navbar-item {
    white-space: nowrap;
  }
}

注意事项 #

• 记得确保你的自定义CSS加载在Bulma的CSS之后，这样才能覆盖默认样式。
• 如果你的navbar是深色主题，记得把background-color改成对应的深色，比如#363636。
• 添加overflow-y: auto是为了避免菜单内容过多时超出屏幕高度，保证用户可以滚动查看。

内容的提问来源于stack exchange，提问作者aroaro