如何让Bootstrap导航栏/标签栏实现水平滚动？

我明白你遇到的麻烦——小屏幕下最后一个标签被挤到第二行，试了各种CSS属性都没达到理想效果。其实用Flex布局就能完美解决这个问题，下面是具体的实现步骤：

核心CSS修改 #

首先给你的nav.nav-tabs容器添加以下样式，强制所有标签保持在一行并启用水平滚动：

.nav.nav-tabs {
  display: flex;
  flex-wrap: nowrap; /* 禁止标签换行 */
  overflow-x: auto; /* 宽度不足时显示水平滚动条 */
  padding-bottom: 1px; /* 避免滚动条覆盖tab底部边框 */
  -webkit-overflow-scrolling: touch; /* 让移动端滚动更顺滑 */
}

然后给每个li元素设置不被压缩，保证标签内容完整显示：

.nav.nav-tabs li {
  flex-shrink: 0; /* 防止标签被挤压变形 */
}

可选优化：隐藏滚动条（视觉更整洁） #

如果不想显示滚动条但保留滚动功能，可以添加这些样式：

.nav.nav-tabs {
  scrollbar-width: none; /* Firefox 下隐藏滚动条 */
  -ms-overflow-style: none; /* IE/Edge 下隐藏滚动条 */
}

.nav.nav-tabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera 下隐藏滚动条 */
}

关键注意事项 #

• 一定要移除你给li加的float: left样式！Flex布局下float属性会干扰正常排列，导致布局异常。
• 你的Twig模板部分不需要修改，保持原有的include标签即可，这个布局方案不会影响模板的引入。

修改后的完整代码示例 #

HTML/Twig部分： #

<nav ng-controller="Controller">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active">
      <a href="#progress" data-toggle="tab">Progress</a>
      {% include 'coachmark.html.twig' with { 'key': 'overview.progress', 'arrow': 'left' } %}
    </li>
    <li>
      <a href="#team" data-toggle="tab" ng-click="setAllCommentsAsRead()">
        <span ng-class="{ 'icon-notification': commentNotification }">Team</span>
      </a>
      {% include 'coachmark.html.twig' with { 'key': 'overview.progress', 'arrow': 'left' } %}
    </li>
    <li>
      <a href="#tests" data-toggle="tab">Tests</a>
    </li>
    <li ng-if="announcements.length > 0">
      <a href="#announcements" data-toggle="tab" ng-click="setAllAnnouncementsAsRead()">
        <span ng-class="{ 'icon-notification': announcementNotification }">Announcements</span>
      </a>
    </li>
  </ul>
</nav>

CSS部分： #

.nav.nav-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 1px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav.nav-tabs::-webkit-scrollbar {
  display: none;
}

.nav.nav-tabs li {
  flex-shrink: 0;
}

这样修改后，不管屏幕多小，所有标签都会保持在同一行，用户可以通过水平滚动查看全部内容，而且不会出现页面右侧空白或者标签消失的问题。

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