add justified nav links for tabs and pills

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 0f936bae31e9126bbf74726a943bb9a656dfbb21..e3460137e69de49ad7ddce1d20c884b4c65e4852 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3579,6 +3579,40 @@ input[type="button"].btn-block {
   border-bottom-color: transparent;
 }
 
+.nav-pills > li > a {
+  border-radius: 5px;
+}
+
+.nav-pills > li + li > a {
+  margin-left: 2px;
+}
+
+.nav-pills > .active > a,
+.nav-pills > .active > a:hover {
+  color: #ffffff;
+  background-color: #0088cc;
+}
+
+.nav-stacked > li {
+  float: none;
+}
+
+.nav-stacked > li + li > a {
+  margin-top: 2px;
+  margin-left: 0;
+}
+
+.nav-justified {
+  max-height: 37px;
+}
+
+.nav-justified > li {
+  display: table-cell;
+  float: none;
+  width: 1%;
+  text-align: center;
+}
+
 .nav-list {
   background-color: #fff;
   border-radius: 6px;
@@ -3620,29 +3654,6 @@ input[type="button"].btn-block {
           box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1);
 }
 
-.nav-pills > li > a {
-  border-radius: 5px;
-}
-
-.nav-pills > li + li > a {
-  margin-left: 2px;
-}
-
-.nav-pills > .active > a,
-.nav-pills > .active > a:hover {
-  color: #ffffff;
-  background-color: #0088cc;
-}
-
-.nav-stacked > li {
-  float: none;
-}
-
-.nav-stacked > li + li > a {
-  margin-top: 2px;
-  margin-left: 0;
-}
-
 .nav-tabs .dropdown-menu {
   -webkit-border-top-right-radius: 0;
           border-top-right-radius: 0;

diff --git a/docs/components.html b/docs/components.html
index 3c47835c3db6a1a67adab17ae4e12cdcd096a35e..14e9041f3bc585a37aba3d068ced5161b303e345 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -748,6 +748,31 @@
 
           <h2>Options</h2>
 
+          <h3>Justified links</h3>
+          <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
+          <div class="bs-docs-example">
+            <ul class="nav nav-tabs nav-justified">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Profile</a></li>
+              <li><a href="#">Messages</a></li>
+            </ul>
+            <br>
+            <ul class="nav nav-pills nav-justified">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Profile</a></li>
+              <li><a href="#">Messages</a></li>
+            </ul>
+          </div>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-tabs nav-justified"&gt;
+  ...
+&lt;/ul&gt;
+
+&lt;ul class="nav nav-pills nav-justified"&gt;
+  ...
+&lt;/ul&gt;
+</pre>
+
           <h3>Disabled state</h3>
           <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
           <div class="bs-docs-example">

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index b72cd01eda1759ffea4c8261c6305b24544122f9..9e796b9ba22e81a16fdce879873c59c2b0a530c0 100644 (file)
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -680,6 +680,31 @@
 
           <h2>{{_i}}Options{{/i}}</h2>
 
+          <h3>{{_i}}Justified links{{/i}}</h3>
+          <p>{{_i}}Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.{{/i}}</p>
+          <div class="bs-docs-example">
+            <ul class="nav nav-tabs nav-justified">
+              <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+              <li><a href="#">{{_i}}Profile{{/i}}</a></li>
+              <li><a href="#">{{_i}}Messages{{/i}}</a></li>
+            </ul>
+            <br>
+            <ul class="nav nav-pills nav-justified">
+              <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+              <li><a href="#">{{_i}}Profile{{/i}}</a></li>
+              <li><a href="#">{{_i}}Messages{{/i}}</a></li>
+            </ul>
+          </div>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-tabs nav-justified"&gt;
+  ...
+&lt;/ul&gt;
+
+&lt;ul class="nav nav-pills nav-justified"&gt;
+  ...
+&lt;/ul&gt;
+</pre>
+
           <h3>{{_i}}Disabled state{{/i}}</h3>
           <p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.{{/i}}</p>
           <div class="bs-docs-example">

diff --git a/less/navs.less b/less/navs.less
index 5ca43f9e0de960b36030a6551b9c88d2627521ed..bfdec50ed5d7ff6ff547769586d84391210196c0 100644 (file)
--- a/less/navs.less
+++ b/less/navs.less
@@ -85,6 +85,51 @@
 
 
 
+// Pills
+// -------------------------
+
+// Links rendered as pills
+.nav-pills > li > a {
+  border-radius: 5px;
+}
+.nav-pills > li + li > a {
+  margin-left: 2px;
+}
+
+// Active state
+.nav-pills > .active > a,
+.nav-pills > .active > a:hover {
+  color: @white;
+  background-color: @linkColor;
+}
+
+// Stacked pills
+.nav-stacked > li {
+  float: none;
+}
+.nav-stacked > li + li > a {
+  margin-top: 2px;
+  margin-left: 0; // no need for the gap between nav items
+}
+
+
+
+// Justified navs
+// -------------------------
+
+.nav-justified {
+  // Negative margin doesn't work, so we hack it
+  max-height: 37px;
+}
+.nav-justified > li {
+  float: none;
+  display: table-cell;
+  width: 1%;
+  text-align: center;
+}
+
+
+
 // Lists
 // -------------------------
 
@@ -123,35 +168,6 @@
 
 
 
-// Pills
-// -------------------------
-
-// Links rendered as pills
-.nav-pills > li > a {
-  border-radius: 5px;
-}
-.nav-pills > li + li > a {
-  margin-left: 2px;
-}
-
-// Active state
-.nav-pills > .active > a,
-.nav-pills > .active > a:hover {
-  color: @white;
-  background-color: @linkColor;
-}
-
-// Stacked pills
-.nav-stacked > li {
-  float: none;
-}
-.nav-stacked > li + li > a {
-  margin-top: 2px;
-  margin-left: 0; // no need for the gap between nav items
-}
-
-
-
 // Dropdowns
 // -------------------------