fix navbar form alignment, and update examples to show these cases

docs/assets/css/bootstrap.css

@@ -4018,7 +4018,7 @@ input[type="submit"].btn.btn-mini {
 .navbar .brand {
   display: block;
   float: left;
-  padding: 10px 20px 10px;
+  padding: 8px 20px 12px;
   margin-left: -20px;
   font-size: 20px;
   font-weight: 200;
@@ -4072,7 +4072,7 @@ input[type="submit"].btn.btn-mini {
 .navbar-form select,
 .navbar-form .radio,
 .navbar-form .checkbox {
-  margin-top: 6px;
+  margin-top: 5px;
 }
 
 .navbar-form input,

docs/examples/fluid.html

@@ -44,18 +44,10 @@
             <span class="icon-bar"></span>
           </a>
           <a class="brand" href="#">Project name</a>
-          <div class="btn-group pull-right">
-            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
-              <i class="icon-user"></i> Username
-              <span class="caret"></span>
-            </a>
-            <ul class="dropdown-menu">
-              <li><a href="#">Profile</a></li>
-              <li class="divider"></li>
-              <li><a href="#">Sign Out</a></li>
-            </ul>
-          </div>
           <div class="nav-collapse collapse">
+            <p class="navbar-text pull-right">
+              Logged in as <a href="#" class="navbar-link">Username</a>
+            </p>
             <ul class="nav">
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#about">About</a></li>

docs/examples/hero.html

@@ -47,6 +47,11 @@
               <li><a href="#about">About</a></li>
               <li><a href="#contact">Contact</a></li>
             </ul>
+            <form class="navbar-form pull-right">
+              <input class="span2" type="text" placeholder="Email">
+              <input class="span2" type="password" placeholder="Password">
+              <button type="submit" class="btn">Sign in</button>
+            </form>
           </div><!--/.nav-collapse -->
         </div>
       </div>

less/navbar.less

@@ -48,7 +48,8 @@
   display: block;
   // Vertically center the text given @navbarHeight
   @elementHeight: 20px;
-  padding: ((@navbarHeight - @elementHeight) / 2) 20px ((@navbarHeight - @elementHeight) / 2);
+  @heightDifference: @navbarHeight - @elementHeight;
+  padding: ((@heightDifference / 2) - 2) 20px ((@heightDifference / 2) + 2);
   margin-left: -20px; // negative indent to left-align the text down the page
   font-size: 20px;
   font-weight: 200;
@@ -93,7 +94,7 @@
   select,
   .radio,
   .checkbox {
-    .navbarVerticalAlign(28px); // Vertically center in navbar
+    .navbarVerticalAlign(30px); // Vertically center in navbar
   }
   input,
   select,

less/tests/css-tests.html

@@ -34,7 +34,7 @@
 
   <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
           <a class="brand" href="../../docs/index.html">Bootstrap</a>
@@ -53,7 +53,9 @@
 </header>
 
 
-<div class="container">
+<div class="bs-docs-canvas">
+
+  <div class="container">
 
 
 
@@ -1096,6 +1098,7 @@
       </div>
     </footer>
 
+</div>
 
 
     <!-- Le javascript