fix forms in navbars, fix examples' navbars

9 files changed, 36 insertions, 24 deletions

diff --git a/bootstrap.css b/bootstrap.css
index 85ed7961a..f10d872ac 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Fri Jan  6 23:58:33 PST 2012
+ * Date: Sat Jan  7 00:24:46 PST 2012
  */
 html, body {
   margin: 0;
@@ -627,6 +627,7 @@ textarea {
 }
 .radio.inline, .checkbox.inline {
   display: inline-block;
+  margin-bottom: 0;
 }
 .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline {
   margin-left: 10px;
@@ -1681,6 +1682,10 @@ i {
 .navbar-form {
   margin-bottom: 0;
 }
+.navbar-form input, .navbar-form select {
+  display: inline-block;
+  margin-bottom: 0;
+}
 .navbar-search {
   position: relative;
   float: left;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 16f9fb76b..17d3c4b39 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -108,7 +108,7 @@ textarea{height:auto;}
 .radio,.checkbox{padding-left:18px;}
 .radio input[type=radio],.checkbox input[type=checkbox]{float:left;margin-left:-18px;}
 .controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:6px;}
-.radio.inline,.checkbox.inline{display:inline-block;}
+.radio.inline,.checkbox.inline{display:inline-block;margin-bottom:0;}
 .radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;}
 input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;}
 input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;}
@@ -287,7 +287,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;}
 .navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;}
 .navbar .btn{margin-top:5px;}
-.navbar-form{margin-bottom:0;}
+.navbar-form{margin-bottom:0;}.navbar-form input,.navbar-form select{display:inline-block;margin-bottom:0;}
 .navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#eeeeee;}
 .navbar-search .search-query::-webkit-input-placeholder{color:#eeeeee;}
 .navbar-search .search-query:hover{color:#ffffff;background-color:#999999;background-color:rgba(255, 255, 255, 0.5);}
diff --git a/docs/base-css.html b/docs/base-css.html
index cbdf5ea19..cc92bc221 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1102,6 +1102,7 @@
         <hr>
         <h3>Checkboxes and radios</h3>
         <p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.</p>
+        <p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p>
       </div>
     </div>
   </div><!-- /row -->
diff --git a/examples/container-app.html b/examples/container-app.html
index 28807bb05..778bceacf 100644
--- a/examples/container-app.html
+++ b/examples/container-app.html
@@ -75,7 +75,7 @@
 
   <body>
 
-    <div class="navbar">
+    <div class="navbar navbar-fixed">
       <div class="navbar-inner">
         <div class="container">
           <a class="brand" href="#">Project name</a>
diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html
index a32291d46..8df731181 100644
--- a/examples/fluid-reverse.html
+++ b/examples/fluid-reverse.html
@@ -28,7 +28,7 @@
 
   <body>
 
-    <div class="navbar">
+    <div class="navbar navbar-fixed">
       <div class="navbar-inner">
         <div class="fluid-container">
           <a class="brand" href="#">Project name</a>
@@ -78,17 +78,17 @@
 
         <!-- Example row of columns -->
         <div class="row">
-          <div class="span6">
+          <div class="span4">
             <h2>Heading</h2>
-            <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
             <p><a class="btn" href="#">View details &raquo;</a></p>
           </div>
-          <div class="span5">
+          <div class="span4">
             <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
             <p><a class="btn" href="#">View details &raquo;</a></p>
          </div>
-          <div class="span5">
+          <div class="span4">
             <h2>Heading</h2>
             <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
             <p><a class="btn" href="#">View details &raquo;</a></p>
@@ -99,17 +99,17 @@
 
         <!-- Example row of columns -->
         <div class="row">
-          <div class="span6">
+          <div class="span4">
             <h2>Heading</h2>
-            <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
             <p><a class="btn" href="#">View details &raquo;</a></p>
           </div>
-          <div class="span5">
+          <div class="span4">
             <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
             <p><a class="btn" href="#">View details &raquo;</a></p>
          </div>
-          <div class="span5">
+          <div class="span4">
             <h2>Heading</h2>
             <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
             <p><a class="btn" href="#">View details &raquo;</a></p>
diff --git a/examples/fluid.html b/examples/fluid.html
index 3b8bb46a8..66e07c82e 100644
--- a/examples/fluid.html
+++ b/examples/fluid.html
@@ -28,7 +28,7 @@
 
   <body>
 
-    <div class="navbar">
+    <div class="navbar navbar-fixed">
       <div class="navbar-inner">
         <div class="fluid-container">
           <a class="brand" href="#">Project name</a>
@@ -78,9 +78,9 @@
 
         <!-- Example row of columns -->
         <div class="row">
-          <div class="span6">
+          <div class="span4">
             <h2>Heading</h2>
-            <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
             <p><a class="btn" href="#">View details &raquo;</a></p>
           </div>
           <div class="span5">
@@ -99,9 +99,9 @@
 
         <!-- Example row of columns -->
         <div class="row">
-          <div class="span6">
+          <div class="span4">
             <h2>Heading</h2>
-            <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
             <p><a class="btn" href="#">View details &raquo;</a></p>
           </div>
           <div class="span5">
diff --git a/examples/hero.html b/examples/hero.html
index d84eb8843..3a7a53983 100644
--- a/examples/hero.html
+++ b/examples/hero.html
@@ -28,7 +28,7 @@
 
   <body>
 
-    <div class="navbar">
+    <div class="navbar navbar-fixed">
       <div class="navbar-inner">
         <div class="container">
           <a class="brand" href="#">Project name</a>
@@ -52,17 +52,17 @@
 
       <!-- Example row of columns -->
       <div class="row">
-        <div class="span6">
+        <div class="span4">
           <h2>Heading</h2>
-          <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
           <p><a class="btn" href="#">View details &raquo;</a></p>
         </div>
-        <div class="span5">
+        <div class="span4">
           <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
           <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
-        <div class="span5">
+        <div class="span4">
           <h2>Heading</h2>
           <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
           <p><a class="btn" href="#">View details &raquo;</a></p>
diff --git a/lib/forms.less b/lib/forms.less
index 8b85d240a..9e0b84362 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -141,10 +141,11 @@ textarea {
 .radio.inline,
 .checkbox.inline {
   display: inline-block;
+  margin-bottom: 0;
 }
 .radio.inline + .radio.inline,
 .checkbox.inline + .checkbox.inline {
-  margin-left: 10px;
+  margin-left: 10px; // space out consecutive inline controls
 }
 
 
diff --git a/lib/navbar.less b/lib/navbar.less
index edc19c641..516890ba7 100644
--- a/lib/navbar.less
+++ b/lib/navbar.less
@@ -56,6 +56,11 @@
 // Navbar forms
 .navbar-form {
   margin-bottom: 0; // remove default bottom margin
+  input,
+  select {
+    display: inline-block;
+    margin-bottom: 0;
+  }
 }
 
 // Navbar search