title: Bootstrap nav-justified doesn't take up full width
body: <p>In <a href="/questions/tagged/bootstrap-4" class="post-tag" title="show questions tagged &#39;bootstrap-4&#39;" rel="tag">bootstrap-4</a> there's a class for <code>nav-pill</code> links to have equal width and to take up all horizontal space:</p>
  
  <blockquote>
    <p>For equal-width elements, use <code>.nav-justified</code>. All horizontal space will be occupied by nav links.</p>
  </blockquote>
  
  <p>At least that's what they say here: <a href="https://getbootstrap.com/docs/4.0/components/navs/#fill-and-justify" rel="nofollow noreferrer">Bootstrap: <em>Fill and justify</em></a></p>
  
  <p>This is their code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;nav class="nav nav-pills nav-justified"&gt;
     &lt;a class="nav-link active" href="#"&gt;Active&lt;/a&gt;
     &lt;a class="nav-link" href="#"&gt;Longer nav link&lt;/a&gt;
     &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
     &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>which doesn't seem to work properly...  </p>
  
  <p>Am I missing or misunderstood something?</p>
  
  <p><em><strong>Edit:</strong></em><br>
  Let me rephrase my question:<br>
  I understand what <code>.nav-fill</code> does.<br>
  I want to <strong>understand</strong> what <code>.nav-justified</code> does and why isn't working as they say.</p>