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（等）类，但我只是让最后一个标签消失，没有水平滚动的机会或只是创建页面右侧有一个巨大的空隙，以便为最后一个标签腾出空间。

Here's a Pen可以更好地展示问题。

编辑：从笔中移除includes只是为了让眼睛更容易，需要它们。

Answer 1

它的包装导致它是一个弹性项目，并且它上面有flex-wrap:wrap。我已经为你更改了它，并为滚动条添加了一些其他属性。

代码：

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

Example

如何使引导导航栏/选项卡部分水平滚动？

1 个答案: