Css 导航栏中带有空白的下拉菜单nowrap-BS4

使用

Vue引导程序
下拉组件：

当客户端具有小屏幕分辨率时，在Navbar中使用带有水平滚动的下拉元素时，我遇到了一个问题

代码

    <b-nav class="justify-content-end">
      <b-nav-item class="nav__map" active>First item</b-nav-item>
      <b-nav-item class="nav__help">Second item</b-nav-item>
      <b-nav-item-dropdown class="nav__city" text="New-York" extra-toggle-classes="nav-link-custom" right>
        <b-dropdown-item>New-York</b-dropdown-item>
        <b-dropdown-item>San Francisco</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-nav>

由于
空白：nowrap
当我单击下拉列表时，该弹出窗口位于所有元素后面：


我试过玩
z-index
，但没有成功。
我试过你的代码，我需要你的CSS来添加它并查看问题。我的pci上有指向网站的临时链接我不明白
  .nav {
    white-space: nowrap;
    overflow-x: auto;
    display: inherit;

    .nav-item {
      display: inline-block;
    }
  }