Bootstrap 4小设备水平导航栏滚动实现方案求助

嘿，我来帮你搞定这个小问题！要让你的水平导航栏在小屏幕上能横向滚动，只需要简单两步就能实现：

• 第一步：给导航栏父容器添加滚动样式
  给你那个外层的<div>加一个自定义类（比如horizontal-scroll-nav），然后添加下面的CSS样式，让容器在内容超出宽度时显示横向滚动条，同时优化移动端的滚动体验：

  .horizontal-scroll-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 让移动端滚动更丝滑 */
  }
  

• 第二步：确保导航项不换行
  给内部的<ul>加上Bootstrap的flex-nowrap类，强制导航项保持在一行不换行（虽然默认flex-row已经是nowrap，但显式加上更稳妥）：

  <div class="nav-active-border b-danger bottom horizontal-scroll-nav">
    <ul class="nav nav-active-border b-warning flex-row flex-nowrap">
      <li class="nav-item">Link 1</li>
      <li class="nav-item">Link 2</li>
      <li class="nav-item">Link 3</li>
      <li class="nav-item">Link 4</li>
      <li class="nav-item">Link 5</li>
      <li class="nav-item">Link 6</li>
      <li class="nav-item">Link 7</li>
      <li class="nav-item">...</li>
    </ul>
  </div>
  

这样修改之后，当屏幕宽度不足以容纳所有导航项时，导航栏就会自动出现横向滚动条，用户可以左右滑动查看所有链接啦。如果觉得默认滚动条不够美观，还可以用CSS隐藏它（同时保留滚动功能）：

.horizontal-scroll-nav::-webkit-scrollbar {
  display: none;
}
.horizontal-scroll-nav {
  -ms-overflow-style: none;  /* IE 和 Edge */
  scrollbar-width: none;  /* Firefox */
}

内容的提问来源于stack exchange，提问作者user6780526