Diminishing nav-bar items after navbar has overflow Bootstrap

Question

I have problem with fixed navbar. I want that my navbar can be scrolled. Ok, I added to my .nav overflow-x: scroll and when I have some nav-items in my navbar, it looks like:

When nav-items 'overflow' navbar, it looks that:

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

I don't know how to fix this, I need help.

Answer 1

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