Question

我正在使用Bootstrap 3，我想让Tabs在完整内容上对齐。所以我正在使用nav-tabs，如下面的内容所示。它可能看起来有点奇怪，因为我使用Angular 4并且代码是从Dev Tools复制的。

<ul class="nav nav-justified nav-tabs nav-tabs-justified">
    <li class="nav-item" ng-reflect-ng-class="nav-item,">
     <a class="nav-link active" href="javascript:void(0);">
        <span _ngcontent-c5="">Artikel</span>
     </a>
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,">
      <a class="nav-link" href="javascript:void(0);">
        <span>Rezeptierung/Ökonomie</span>
        <!--bindings={}-->
      </a>
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,">
      <a class="nav-link" href="javascript:void(0);">
        <span>Teilbarkeit</span>
        <!--bindings={}-->
      </a>
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,">
      <a class="nav-link" href="javascript:void(0);">
        <span>Zusammensetzung</span>
        <!--bindings={}-->
      </a>
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,">
      <a class="nav-link" href="javascript:void(0);">
        <span>Kurzinformation</span>
        <!--bindings={}-->
      </a>
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,">
      <a class="nav-link" href="javascript:void(0);">
        <span>ATC/IND</span>
        <!--bindings={}-->
      </a>
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,">
      <a class="nav-link" href="javascript:void(0);">
        <span>Lagerung/Abgabe</span>
        <!--bindings={}-->
      </a>
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,">
      <a class="nav-link" href="javascript:void(0);">
        <span>Hersteller</span>
        <!--bindings={}-->
      </a>
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,">
      <a class="nav-link" href="javascript:void(0);">
        <span>Fachinformation</span>
        <!--bindings={}-->
      </a>
    </li>
</ul>

我认为这段代码的输出非常正常，但只有当它是全尺寸时。如果我正在调整我的页面，那么它看起来像这样： Image

在右侧，您可以看到内容的结尾，然后标签溢出。

有人知道如何解决这个问题吗？

Answer 1

建议使用Bootstrap：

<nav class="navbar navbar-default">
    <div class="container">
        <!-- Ul tag -->
    </div>
</nav>

Answer 2

我最终用jQuery解决了这个问题。由于我总共有9个标签，我说好的：

if $(window).width() <= 1473 { // ever third li element add a new </ul><ul> Element, so it will create a new line. } else { // remove </ul><ul> to have the full width. }

对齐标签不会粘在宽度上

2 个答案: