css - 带有空格 nowrap 的导航栏中的下拉菜单 - BS4

Question

使用Vue-bootstrap下拉组件：b-nav-item-dropdown

当客户端具有小屏幕分辨率时，我在导航栏中使用具有水平滚动的下拉元素时遇到问题。

代码

    <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>

CSS

  .nav {
    white-space: nowrap;
    overflow-x: auto;
    display: inherit;

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

因为white-space: nowrap当我单击下拉菜单时，该弹出窗口位于所有元素的后面：

我试过玩z-index，但没有成功。

标签： csstwitter-bootstrapvue.jsbootstrap-4