导航栏溢出Bootstrap后导航栏项目减少

Question

我遇到固定导航栏的问题。我希望我的导航栏可以滚动。好的，我添加到我的.nav overflow-x：滚动，当我的导航栏中有一些导航项时，它看起来像：

当nav-items'溢出'导航栏时，它看起来是：

HTML：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">
<ul class="navbar-nav mr-auto">
  <li class="nav-item">
    Ostatnie notowania:
  </li>
  <li v-for="list in listsList" :class="{ active: checkActive(list.toUrl) }" class="nav-item">
    <a @click.prevent="openList(category, list.toUrl)" href="#">{{ list.toView }}</a>
    <click-confirm style="display: inline-block;" button-size="sm" :messages="{ title: 'Jesteś pewien?', yes: 'Tak', no: 'Nie' }">
      <i @click.prevent="deleteList(category, list.toUrl)" class="fa fa-times" aria-hidden="true"></i>
    </click-confirm>
  </li>
</ul>

nav {
  overflow-x: scroll;
}

我不知道如何解决这个问题，我需要帮助。

Answer 1

检查您的导航栏父级中是否有任何固定宽度或容器宽度，然后将其设置为其父级的100％宽度，您已声明任何固定宽度可用。