Fix justified nav styles and update nav docs for fill/justify

- Justified and fill nav variants need .nav-item classes on the anchors in addition to .nav-link
- Fix broken styles for the .nav-justified class which wasn't actually doing what we needed it to

2 files changed, 24 insertions, 1 deletions

diff --git a/docs/components/navs.md b/docs/components/navs.md
index 5b9397fc11..047eb22054 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -185,6 +185,17 @@ Force your `.nav`'s contents to extend the full available width one of two modif
 </ul>
 {% endexample %}
 
+When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.
+
+{% example html %}
+<nav class="nav nav-pills nav-fill">
+  <a class="nav-item nav-link active" href="#">Active</a>
+  <a class="nav-item nav-link" href="#">Link</a>
+  <a class="nav-item nav-link" href="#">Link</a>
+  <a class="nav-item nav-link disabled" href="#">Disabled</a>
+</nav>
+{% endexample %}
+
 For equal-width elements, use `.nav-justified`. All horizontal space will be occupied by nav links, but unlike the `.nav-fill` above, every nav item will be the same width.
 
 {% example html %}
@@ -204,6 +215,17 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
 </ul>
 {% endexample %}
 
+Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.
+
+{% example html %}
+<nav class="nav nav-pills nav-justified">
+  <a class="nav-item nav-link active" href="#">Active</a>
+  <a class="nav-item nav-link" href="#">Link</a>
+  <a class="nav-item nav-link" href="#">Link</a>
+  <a class="nav-item nav-link disabled" href="#">Disabled</a>
+</nav>
+
+{% endexample %}
 ## Working with flex utilities
 
 If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 7d902a7c05..39f12432d8 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -99,7 +99,8 @@
 
 .nav-justified {
   .nav-item {
-    flex: 1 1 100%;
+    flex-grow: 1;
+    flex-basis: 0;
     text-align: center;
   }
 }