update collapsible nav in navbar

docs/assets/css/bootstrap-responsive.css

@@ -218,7 +218,7 @@
     position: static;
     margin-bottom: 18px;
   }
-  .navbar-inner {
+  .navbar-fixed-top .navbar-inner {
     padding: 5px;
     background-image: none;
   }
@@ -305,10 +305,13 @@
   .btn-navbar {
     display: block;
   }
-  .nav-collapse {
+  .nav-collapse.collapse {
     overflow: hidden;
     height: 0;
   }
+  .nav-collapse.collapse.in {
+    height: auto;
+  }
 }
 @media (min-width: 1200px) {
   .thumbnails {

docs/assets/css/bootstrap.css

@@ -2396,7 +2396,7 @@ button.btn.small, input[type="submit"].btn.small {
   margin-top: 3px;
 }
 .nav-collapse.collapse {
-  height: auto !important;
+  height: auto;
 }
 .navbar .brand:hover {
   text-decoration: none;

docs/base-css.html

@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>

docs/components.html

@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>

docs/download.html

@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>

docs/examples.html

@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>

docs/index.html

@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="active">
                 <a href="./index.html">Overview</a>

docs/javascript.html

@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>

docs/less.html

@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>

docs/scaffolding.html

@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>
@@ -127,7 +127,7 @@
   <div class="row">
     <div class="span4">
       <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
-      <p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p>
+      <p>It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.</p>
     </div>
     <div class="span4">
 <pre class="prettyprint linenums">

docs/templates/layout.mustache

@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="{{index}}">
                 <a href="./index.html">{{_i}}Overview{{/i}}</a>

docs/templates/pages/components.mustache

@@ -669,7 +669,7 @@
 </form>
 </pre>
       <h3>{{_i}}Optional responsive variation{{/i}}</h3>
-      <p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
+      <p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;div class="navbar"&gt;
   &lt;div class="navbar-inner"&gt;
@@ -686,7 +686,7 @@
       &lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
 
       &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
-      &lt;div class="nav-collapse"&gt;
+      &lt;div class="nav-collapse collapse"&gt;
         &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
       &lt;/div&gt;
 

docs/templates/pages/scaffolding.mustache

@@ -55,7 +55,7 @@
   <div class="row">
     <div class="span4">
       <p>{{_i}}The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.{{/i}}</p>
-      <p>{{_i}}It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.{{/i}}</p>
+      <p>{{_i}}It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.{{/i}}</p>
     </div>
     <div class="span4">
 <pre class="prettyprint linenums">

docs/upgrading.html

@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>

less/navbar.less

@@ -42,8 +42,9 @@
 .btn-navbar .i-bar + .i-bar {
   margin-top: 3px;
 }
+// Override the default collapsed state
 .nav-collapse.collapse {
-  height: auto !important; // Required to be !important to override native collapse plugin
+  height: auto;
 }
 
 

less/responsive.less

@@ -240,7 +240,7 @@
     position: static;
     margin-bottom: @baseLineHeight;
   }
-  .navbar-inner {
+  .navbar-fixed-top .navbar-inner {
     padding: 5px;
     background-image: none;
   }
@@ -335,10 +335,13 @@
   }
 
   // Hide everything in the navbar save .brand and toggle button */
-  .nav-collapse {
+  .nav-collapse.collapse {
     overflow: hidden;
     height: 0;
   }
+  .nav-collapse.collapse.in {
+    height: auto;
+  }
 
 }