From: Mark Otto <markdotto@gmail.com>
Date: Mon, 30 Nov 2015 03:38:44 +0000 (-0800)
Subject: fixes #18295. improve .nav-inline usefulness and document the classes as well
X-Git-Tag: v4.0.0-alpha.2~98
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=389a284766ece0ae48efa7155054727cb9e9a8c2;p=thirdparty%2Fbootstrap.git

fixes #18295. improve .nav-inline usefulness and document the classes as well
---

diff --git a/docs/components/navs.md b/docs/components/navs.md
index bea1109ce9..aeac3ed3a8 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -47,6 +47,38 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
 </nav>
 {% endexample %}
 
+## Inline
+
+Easily space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
+
+{% example html %}
+<nav class="nav nav-inline">
+  <a class="nav-link active" href="#">Active</a>
+  <a class="nav-link" href="#">Link</a>
+  <a class="nav-link" href="#">Another link</a>
+  <a class="nav-link disabled" href="#">Disabled</a>
+</nav>
+{% endexample %}
+
+The same works for a navigation build with lists.
+
+{% example html %}
+<ul class="nav nav-inline">
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Another link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" href="#">Disabled</a>
+  </li>
+</ul>
+{% endexample %}
+
 ## Tabs
 
 Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior).
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 5714c77eb7..48249ee7b0 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -32,6 +32,11 @@
 // Nav inline
 
 .nav-inline {
+  .nav-item {
+    display: inline-block;
+  }
+
+  .nav-item + .nav-item,
   .nav-link + .nav-link {
     margin-left: 1rem;
   }