如何设置 bulma 导航栏下拉菜单在左侧而不是右侧打开？

Question

当我打开 bulma 下拉菜单时，它会在右侧打开，有些部分甚至在屏幕之外。如何强制它在左侧使用钢笔下拉菜单？

目前，它看起来像这样：

所以目标是从 Account 项的左侧打开它

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.1
      </div>
    </div>
  </div>
</nav>

怎么解决？

Answer 1

根据documention about the dropdown component,，你可以添加is-right类来使下拉菜单右对齐，所以溢出会在左边。
它也适用于导航栏的下拉菜单，您的代码应如下所示：

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown is-right">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.1
      </div>
    </div>
  </div>
</nav>

结果：