如何阻止Bootstrap中nav元素换行并实现横向滚动

要让你的Bootstrap导航标签在容器内不换行、支持横向滚动，只需要给导航的父容器添加几行自定义CSS就能搞定，我帮你梳理下具体步骤：

步骤说明 #

• 先给包裹<ul class="nav nav-tabs">的<div class="col">添加一个自定义类，比如scrollable-tabs-container，方便我们定位样式。
• 再通过CSS禁用导航的自动换行并开启横向滚动：
  • 给父容器设置overflow-x: auto，让超出容器的部分可以横向滚动
  • 给nav-tabs设置flex-wrap: nowrap，覆盖Bootstrap默认的换行行为
  • 给nav-item设置white-space: nowrap，确保每个导航项不会内部换行

修改后的完整代码 #

HTML部分 #

<div class="jumbotron border">
  <div class="row">
    <div class="col">
      <img src="image.jpg" alt="Placeholder for image">
    </div>
  </div>
  <div class="row">
    <!-- 添加自定义类scrollable-tabs-container -->
    <div class="col scrollable-tabs-container">
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <!-- 可以添加更多导航项测试滚动效果 -->
      </ul>
    </div>
  </div>
</div>

CSS部分 #

.scrollable-tabs-container {
  overflow-x: auto;
  /* 可选：隐藏滚动条优化界面，根据需求调整 */
  /* scrollbar-width: none; */
  /* -ms-overflow-style: none; */
}

.scrollable-tabs-container::-webkit-scrollbar {
  /* 针对Chrome/Safari隐藏滚动条 */
  /* display: none; */
}

.scrollable-tabs-container .nav-tabs {
  flex-wrap: nowrap;
}

.scrollable-tabs-container .nav-item {
  white-space: nowrap;
}

这样调整后，当导航项总宽度超过容器宽度时，就会自动出现横向滚动条，所有导航项都会保持在一行不会换行。你可以根据需求选择是否隐藏滚动条，注释里的代码就是隐藏滚动条的方案，取消注释就能生效。

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