title: Justified Tabs do not stick to width
body: <p>I am using Bootstrap 3 and I want to make the Tabs align on the full content. So i am using nav-tabs as you can see in the content below.
  It maybe looks a little bit strange since I am using Angular 4 and the code is copied from the Dev Tools.</p>
  
  <pre><code>&lt;ul class="nav nav-justified nav-tabs nav-tabs-justified"&gt;
      &lt;li class="nav-item" ng-reflect-ng-class="nav-item,"&gt;
       &lt;a class="nav-link active" href="javascript:void(0);"&gt;
          &lt;span _ngcontent-c5=""&gt;Artikel&lt;/span&gt;
       &lt;/a&gt;
      &lt;/li&gt;&lt;li class="nav-item" ng-reflect-ng-class="nav-item,"&gt;
        &lt;a class="nav-link" href="javascript:void(0);"&gt;
          &lt;span&gt;Rezeptierung/Ökonomie&lt;/span&gt;
          &lt;!--bindings={}--&gt;
        &lt;/a&gt;
      &lt;/li&gt;&lt;li class="nav-item" ng-reflect-ng-class="nav-item,"&gt;
        &lt;a class="nav-link" href="javascript:void(0);"&gt;
          &lt;span&gt;Teilbarkeit&lt;/span&gt;
          &lt;!--bindings={}--&gt;
        &lt;/a&gt;
      &lt;/li&gt;&lt;li class="nav-item" ng-reflect-ng-class="nav-item,"&gt;
        &lt;a class="nav-link" href="javascript:void(0);"&gt;
          &lt;span&gt;Zusammensetzung&lt;/span&gt;
          &lt;!--bindings={}--&gt;
        &lt;/a&gt;
      &lt;/li&gt;&lt;li class="nav-item" ng-reflect-ng-class="nav-item,"&gt;
        &lt;a class="nav-link" href="javascript:void(0);"&gt;
          &lt;span&gt;Kurzinformation&lt;/span&gt;
          &lt;!--bindings={}--&gt;
        &lt;/a&gt;
      &lt;/li&gt;&lt;li class="nav-item" ng-reflect-ng-class="nav-item,"&gt;
        &lt;a class="nav-link" href="javascript:void(0);"&gt;
          &lt;span&gt;ATC/IND&lt;/span&gt;
          &lt;!--bindings={}--&gt;
        &lt;/a&gt;
      &lt;/li&gt;&lt;li class="nav-item" ng-reflect-ng-class="nav-item,"&gt;
        &lt;a class="nav-link" href="javascript:void(0);"&gt;
          &lt;span&gt;Lagerung/Abgabe&lt;/span&gt;
          &lt;!--bindings={}--&gt;
        &lt;/a&gt;
      &lt;/li&gt;&lt;li class="nav-item" ng-reflect-ng-class="nav-item,"&gt;
        &lt;a class="nav-link" href="javascript:void(0);"&gt;
          &lt;span&gt;Hersteller&lt;/span&gt;
          &lt;!--bindings={}--&gt;
        &lt;/a&gt;
      &lt;/li&gt;&lt;li class="nav-item" ng-reflect-ng-class="nav-item,"&gt;
        &lt;a class="nav-link" href="javascript:void(0);"&gt;
          &lt;span&gt;Fachinformation&lt;/span&gt;
          &lt;!--bindings={}--&gt;
        &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the Output of this code is pretty normal I think, but only when it is full size. If I am resizing my Page then it looks like this:
  <a href="https://i.stack.imgur.com/jAXDi.png" rel="nofollow noreferrer">Image</a></p>
  
  <p>On the right side you can see the End of the content and then there is a overflow of the tabs.</p>
  
  <p>Does anybody know how this can be solved?</p>