flexbox this thing

- drop the table styles, use flex
- remove commented out code
- consolidate styles a bit
- add a huge flex-grow to the nav, making the assumption you want nav to take up most space

diff --git a/docs/examples/navbar/all-navbars.html b/docs/examples/navbar/all-navbars.html
index 61ad5f7396759a3c77006c4fb1f3f9d8bd6d2600..864d95c40b55ada87bf61139327a6b7f658032ee 100644 (file)
--- a/docs/examples/navbar/all-navbars.html
+++ b/docs/examples/navbar/all-navbars.html
@@ -22,10 +22,8 @@
 
     <nav class="navbar navbar-dark bg-inverse">
       <div class="navbar-container">
-        <div class="navbar-item">
-          <a class="navbar-brand" href="#">Default</a>
-        </div>
-        <ul class="navbar-item nav navbar-nav">
+        <a class="navbar-brand" href="#">Default</a>
+        <ul class="nav navbar-nav">
           <li class="nav-item active">
             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
           </li>
@@ -39,7 +37,7 @@
             <a class="nav-link" href="#">About</a>
           </li>
         </ul>
-        <form class="navbar-item form-inline text-md-right">
+        <form class="form-inline text-md-right">
           <input class="form-control" type="text" placeholder="Search">
           <button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button>
         </form>
@@ -48,13 +46,11 @@
 
     <nav class="navbar navbar-dark bg-inverse">
       <div class="navbar-container">
-        <div class="navbar-item">
-          <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
-          <a class="navbar-brand" href="#">Responsive</a>
-        </div>
+        <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
+        <a class="navbar-brand" href="#">Responsive</a>
 
         <div class="collapse navbar-toggleable-md" id="navbarResponsive">
-          <ul class="navbar-item navbar-item-primary nav navbar-nav">
+          <ul class="nav navbar-nav">
             <li class="nav-item active">
               <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
             </li>
@@ -68,7 +64,7 @@
               <a class="nav-link" href="#">About</a>
             </li>
           </ul>
-          <form class="navbar-item form-inline text-md-right">
+          <form class="form-inline text-md-right">
             <input class="form-control" type="text" placeholder="Search">
             <button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button>
           </form>
@@ -76,39 +72,10 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-dark bg-inverse">
-      <div class="navbar-container">
-        <div class="navbar-item navbar-item-primary">
-          <a class="navbar-brand mr-2" href="#">Primary</a>
-          <ul class="nav navbar-nav d-inline-block">
-            <li class="nav-item active">
-              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">Features</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">Pricing</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">About</a>
-            </li>
-          </ul>
-        </div>
-
-        <form class="navbar-item form-inline text-md-right">
-          <input class="form-control" type="text" placeholder="Search">
-          <button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button>
-        </form>
-      </div>
-    </nav>
-
     <nav class="navbar navbar-dark bg-inverse">
       <div class="navbar-container navbar-container-justified">
-        <div class="navbar-item">
-          <a class="navbar-brand" href="#">Justified &amp; Centered nav</a>
-        </div>
-        <ul class="navbar-item nav navbar-nav text-md-center">
+        <a class="navbar-brand" href="#">Justified &amp; Centered nav</a>
+        <ul class="nav navbar-nav text-md-center">
           <li class="nav-item active">
             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
           </li>
@@ -122,7 +89,7 @@
             <a class="nav-link" href="#">About</a>
           </li>
         </ul>
-        <form class="navbar-item form-inline text-md-right">
+        <form class="form-inline text-md-right">
           <input class="form-control" type="text" placeholder="Search">
           <button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button>
         </form>

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 0ca96605c5b6af6061cdc61b8c202299665ee13e..ba4cdaac9647c2ea29bb087e6705faa7a1ab6cd2 100644 (file)
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -5,95 +5,41 @@
 
 .navbar {
   position: relative;
-  // padding: $navbar-padding-y $navbar-padding-x;
-  // @include clearfix;
-
-  // @include media-breakpoint-up(sm) {
-  //   @include border-radius($navbar-border-radius);
-  // }
+  padding: $navbar-padding-y $navbar-padding-x;
 }
 
 .navbar-container {
   @include media-breakpoint-up(sm) {
-    display: table;
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
+    align-items: center;
     width: 100%;
 
-    // .navbar-container-justified
+    // // .navbar-container-justified
     &-justified {
-      table-layout: fixed;
-    }
-  }
-}
-
-.navbar-item {
-  display: block;
-  padding: $navbar-padding-y $navbar-padding-x;
-  // padding: .5rem .75rem;
-  vertical-align: middle;
-
-  @include media-breakpoint-up(sm) {
-    display: table-cell;
-    white-space: nowrap;
-
-    // .navbar-item-primary
-    &-primary {
-      width: 99%;
-
-      ~ .navbar-item {
-        width: 1%;
-      }
-    }
-  }
-}
-
-.navbar-nav {
-  // .nav-item {
-  //   display: block;
-  // }
-
-  .nav-link {
-    display: block;
-    padding: .425rem .5rem;
-  }
-
-  @include media-breakpoint-up(sm) {
-    .nav-item {
-      display: inline-block;
+      justify-content: space-between; // todo: drop for util
     }
   }
 }
 
 .navbar-toggler-left {
   position: absolute;
-  // top: $navbar-padding-y;
   left: $navbar-padding-x;
 }
 
 .navbar-toggler-right {
   position: absolute;
-  // top: $navbar-padding-y;
   right: $navbar-padding-x;
 }
 
 
-// .navbar-collapse-sm
-
-
 
 // Navbar alignment options
 //
 // Display the navbar across the entirety of the page or fixed it to the top or
 // bottom of the page.
 
-// A static, full width modifier with no rounded corners.
-// .navbar-full {
-//   z-index: $zindex-navbar;
-//
-//   @include media-breakpoint-up(sm) {
-//     @include border-radius(0);
-//   }
-// }
-
 // Fix the top/bottom navbars when screen real estate supports it
 .navbar-fixed-top,
 .navbar-fixed-bottom {
@@ -134,10 +80,6 @@
 //
 
 .navbar-brand {
-  // float: left;
-  // padding-top: $navbar-brand-padding-y;
-  // padding-bottom: $navbar-brand-padding-y;
-  // margin-right: 1rem;
   display: inline-block;
   padding: .25rem .5rem;
   font-size: $font-size-lg;
@@ -200,25 +142,21 @@
 //
 // Custom navbar navigation built on the base `.nav` styles.
 
-// .navbar-nav {
-//   .nav-item {
-//     float: left;
-//   }
-//
-//   .nav-link {
-//     display: block;
-//     padding-top:    .425rem;
-//     padding-bottom: .425rem;
-//
-//     + .nav-link {
-//       margin-left: 1rem;
-//     }
-//   }
-//
-//   .nav-item + .nav-item {
-//     margin-left: 1rem;
-//   }
-// }
+.navbar-nav {
+  flex-grow: 10; // high number to force alignment
+
+  .nav-link {
+    display: block;
+    padding: .425rem .5rem;
+  }
+
+  @include media-breakpoint-up(sm) {
+    .nav-item {
+      display: inline-block;
+    }
+  }
+}
+
 
 // Dark links against a light background
 .navbar-light {
@@ -330,31 +268,16 @@
       @include clearfix;
 
       @include media-breakpoint-down($breakpoint) {
-        // .navbar-brand {
-        //   display: block;
-        //   float: none;
-        //   margin-top: .5rem;
-        //   margin-right: 0;
-        // }
-
         .navbar-nav {
-          // margin-top: .5rem;
-          // margin-bottom: .5rem;
-
           .dropdown-menu {
             position: static;
             float: none;
           }
-
-          // .nav-item {
-          //   float: none;
-          //   margin-left: 0;
-          // }
         }
       }
 
       @include media-breakpoint-up($next) {
-        display: table-cell !important;
+        display: flex !important;
         width: 100%;
       }
     }