Change up the "justified" nav options

Given move to flexbox, we can make this available for everyone and clean it up some.

- Simplifies the `.nav-justified` styles to build on the flex-powered `.nav` base class.

- Adds the `.nav-fill` to make nav links fill available horizontal space, but not equal width.

1 files changed, 15 insertions, 29 deletions

diff --git a/scss/_nav.scss b/scss/_nav.scss
index 66d16ef061..123d2b844b 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -96,24 +96,30 @@
   }
 }
 
-.nav-stacked {
+
+//
+// Justified variants
+//
+
+.nav-fill {
   .nav-item {
-    display: block;
-    float: none;
+    flex: 1 1 auto;
+    text-align: center;
+  }
+}
 
-    + .nav-item {
-      margin-top: $nav-item-margin;
-      margin-left: 0;
-    }
+.nav-justified {
+  .nav-item {
+    flex: 1 1 100%;
+    text-align: center;
   }
 }
 
 
-//
 // Tabbable tabs
 //
-
 // Hide tabbable panes to start, show them when `.active`
+
 .tab-content {
   > .tab-pane {
     display: none;
@@ -122,23 +128,3 @@
     display: block;
   }
 }
-
-
-// Justified navigation
-//
-// Justified nav components are only built for flexbox mode in Bootstrap 4. In
-// previous versions, this component variation was limited to anchor-based nav
-// implementations--meaning it couldn't be used on button elements. This is due
-// to a longstanding Safari bug in responsive table styles.
-//
-// Using flexbox, we avoid that problem altogether at the cost of no default
-// justified navigation for default Bootstrap. Sorry, y'all <3.
-
-.nav-justified {
-  display: flex;
-
-  .nav-item {
-    flex: 1;
-    text-align: center;
-  }
-}