Как сделать горизонтальную прокрутку раздела начальной загрузки / вкладки начальной загрузки?

Question

У меня есть раздел вкладок, созданный с помощью bootstrap navbar, например:

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

Когда экран становится слишком маленьким (размер мобильного телефона / планшета), последний <li>, который имеет float: left, идет под первым, во второй ряд.

Я хотел бы сделать его прокручиваемым горизонтально, чтобы все элементы были в одном ряду.

Я былвозиться с классами overflow, white-space, display (и т. д.), но я просто заставляю либо последнюю вкладку в основном исчезать без возможности горизонтальной прокрутки, либо просто создаю огромный пустой пробел в правой части страницы, чтобы сделатьпробел до последней вкладки.

Вот ручка для лучшей визуализации проблемы.

РЕДАКТИРОВАТЬ: Удалено includes из пера только для облегченияглаз, они нужны.

Answer 1

Его обертывание является гибким предметом и имеет flex-wrap:wrap.Я изменил его для вас и добавил несколько других свойств для отображения полос прокрутки.

Код:

.nav-tabs {
   flex-wrap: nowrap;
   overflow-x: auto;
   overflow-y:hidden;
 }

Пример