redo the form examples to enable better responsive layout

3 files changed, 49 insertions, 34 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index d0a5623f4..6cb8720c7 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -146,8 +146,6 @@ section {
      -moz-border-radius: 4px;
           border-radius: 4px;  
 }
-.subhead .nav {
-}
 .subhead .nav a {
   margin: 0;
   padding-top: 11px;
@@ -477,7 +475,7 @@ h2 + .row {
 
 /* Remove bottom margin on example forms in wells */
 form.well {
-  margin-bottom: 0;
+  padding: 14px;
 }
 
 /* Tighten up spacing */
@@ -558,6 +556,14 @@ form.well {
     margin-top: 18px;
   }
 
+  /* Subnav */
+  .subnav {
+    background: none;
+  }
+  .subnav .nav > li {
+    float: none;
+  }
+
   /* Adjust the jumbotron */
   .jumbotron h1,
   .jumbotron p {
@@ -580,25 +586,6 @@ form.well {
     margin: 0 auto 10px;
   }
 
-  /* Subnav */
-  .subhead .nav {
-    padding: 0;
-    background: none;
-  }
-  .subhead .nav > li {
-    float: none;
-  }
-  .subhead .nav li + li a {
-    border-top: 1px solid #eee;
-  }
-  .subhead .subnav-fixed {
-    position: static;
-    top: auto;
-    z-index: auto;
-    width: auto;
-  }
-
-
   /* Don't space out quick links so much */
   .quick-links {
     margin: 40px 0 0;
@@ -632,6 +619,14 @@ form.well {
 
 @media (max-width: 768px) {
 
+  /* Subnav */
+  .subnav-fixed {
+    position: static;
+    top: auto;
+    z-index: auto;
+    width: auto;
+  }
+
   /* Adjust the jumbotron */
   .jumbotron .benefits {
     position: relative;
diff --git a/docs/base-css.html b/docs/base-css.html
index c849a299e..27251d824 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -887,10 +887,12 @@
 
 
   <h2>Example forms <small>using just form controls, no extra markup</small></h2>
+  <h3>Basic form</h3>
   <div class="row">
-    <div class="span4">
-      <h3>Basic form</h3>
+    <div class="span3">
       <p>With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.</p>
+    </div>
+    <div class="span9">
       <form class="well">
         <label>Label name</label>
         <input type="text" class="span3" placeholder="Type something…">
@@ -900,17 +902,25 @@
         <button type="submit" class="btn">Submit</button>
       </form>
     </div>
-    <div class="span4">
-      <h3>Search form</h3>
+  </div> <!-- /row -->
+  <h3>Search form</h3>
+  <div class="row">
+    <div class="span3">
       <p>Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.</p>
+    </div>
+    <div class="span9">
       <form class="well form-search">
         <input type="text" class="input-medium search-query">
         <button type="submit" class="btn">Search</button>
       </form>
     </div>
-    <div class="span4">
-      <h3>Inline form</h3>
+  </div> <!-- /row -->
+  <h3>Inline form</h3>
+  <div class="row">
+    <div class="span3">
       <p>Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.</p>
+    </div>
+    <div class="span9">
       <form class="well form-search">
         <input type="text" class="input-small" placeholder="Email">
         <input type="password" class="input-small" placeholder="Password">
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 41722aa71..225e88d2b 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -827,10 +827,12 @@
 
 
   <h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
+  <h3>{{_i}}Basic form{{/i}}</h3>
   <div class="row">
-    <div class="span4">
-      <h3>{{_i}}Basic form{{/i}}</h3>
+    <div class="span3">
       <p>{{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}</p>
+    </div>
+    <div class="span9">
       <form class="well">
         <label>{{_i}}Label name{{/i}}</label>
         <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}">
@@ -840,17 +842,25 @@
         <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
       </form>
     </div>
-    <div class="span4">
-      <h3>{{_i}}Search form{{/i}}</h3>
+  </div> <!-- /row -->
+  <h3>{{_i}}Search form{{/i}}</h3>
+  <div class="row">
+    <div class="span3">
       <p>{{_i}}Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.{{/i}}</p>
+    </div>
+    <div class="span9">
       <form class="well form-search">
         <input type="text" class="input-medium search-query">
         <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
       </form>
     </div>
-    <div class="span4">
-      <h3>{{_i}}Inline form{{/i}}</h3>
+  </div> <!-- /row -->
+  <h3>{{_i}}Inline form{{/i}}</h3>
+  <div class="row">
+    <div class="span3">
       <p>{{_i}}Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.{{/i}}</p>
+    </div>
+    <div class="span9">
       <form class="well form-search">
         <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
         <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">