我可以将中心导航项目放入移动视口中的可滚动选项卡吗？

Question

我有一个包含三个导航栏的页面，其中一个我想表现的是可滚动的标签图案[类似于材料设计。现在，我将文本居中，但省略了屏幕尺寸缩小时的常用溢出菜单。我希望文本锚定到左侧并在x轴上滚动。我很挣扎，因为bootstrap就是这样一个响应式框架，可滚动的navbars似乎与那个模式有点对立。

<nav class="navbar navbar-expand-lg navbar-light" id="subNav">
  <div class="container-fluid">
    <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
      <ul class="navbar-nav" id="subList">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">News</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Updates</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Links</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Jobs</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Legal</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

这是在物品悬停/点击时处理下划线/边框的CSS

#subNav {
  background-color: white;
  overflow-x: auto;
}

#subNav a:hover {
  border-bottom: 3px solid green;
  color: green;
}

#subNav a.active {
  border-bottom: 3px solid green;
  color: green;
}

一些类似的帖子建议在CSS中将overflow-x设置为auto会修复它，但据我所知，它没有。