Update inline and horizontal forms

* No more need for `.row.form-group`--only need `.form-group`
* Change tag selectors for inline form to use `.form-control`
* Docs improved to explain what's happening

css.html

@@ -1166,7 +1166,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <h2 id="forms-example">Basic example</h2>
-    <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
+    <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
     <form class="bs-example">
       <fieldset>
         <legend>Legend</legend>
@@ -1252,15 +1252,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h3 id="forms-horizontal">Horizontal form</h3>
-    <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p>
+    <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
     <form class="bs-example form-horizontal">
-      <div class="row form-group">
+      <div class="form-group">
         <label for="inputEmail" class="col-lg-2 control-label">Email</label>
         <div class="col-lg-10">
           <input type="text" class="form-control" id="inputEmail" placeholder="Email">
         </div>
       </div>
-      <div class="row form-group">
+      <div class="form-group">
         <label for="inputPassword" class="col-lg-2 control-label">Password</label>
         <div class="col-lg-10">
           <input type="password" class="form-control" id="inputPassword" placeholder="Password">
@@ -1277,13 +1277,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </form>
 {% highlight html %}
 <form class="form-horizontal">
-  <div class="row form-group">
+  <div class="form-group">
     <label for="inputEmail" class="col-lg-2 control-label">Email</label>
     <div class="col-lg-10">
       <input type="text" class="form-control" id="inputEmail" placeholder="Email">
     </div>
   </div>
-  <div class="row form-group">
+  <div class="form-group">
     <label for="inputPassword" class="col-lg-2 control-label">Password</label>
     <div class="col-lg-10">
       <input type="password" class="form-control" id="inputPassword" placeholder="Password">

dist/css/bootstrap.css

@@ -1640,9 +1640,7 @@ select.input-small {
   z-index: 2;
 }
 
-.form-inline input,
+.form-inline .form-control,
-.form-inline select,
-.form-inline textarea,
 .form-inline .radio,
 .form-inline .checkbox {
   display: inline-block;
@@ -1658,6 +1656,38 @@ select.input-small {
   padding-top: 6px;
 }
 
+.form-horizontal .form-group:before,
+.form-horizontal .form-group:after {
+  display: table;
+  content: " ";
+}
+
+.form-horizontal .form-group:after {
+  clear: both;
+}
+
+.form-horizontal .form-group:before,
+.form-horizontal .form-group:after {
+  display: table;
+  content: " ";
+}
+
+.form-horizontal .form-group:after {
+  clear: both;
+}
+
+@media (min-width: 768px) {
+  .form-horizontal .form-group {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+}
+
+.form-horizontal .form-group .row {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
 @media (min-width: 768px) {
   .form-horizontal .control-label {
     text-align: right;
@@ -2748,9 +2778,7 @@ button.close {
   margin-bottom: 6px;
 }
 
-.navbar-form input,
+.navbar-form .form-control,
-.navbar-form select,
-.navbar-form textarea,
 .navbar-form .radio,
 .navbar-form .checkbox {
   display: inline-block;

less/forms.less

@@ -388,9 +388,7 @@ select {
 // --------------------------------------------------
 
 .form-inline {
-  input,
+  .form-control,
-  select,
-  textarea,
   .radio,
   .checkbox {
     display: inline-block;
@@ -408,7 +406,13 @@ select {
 // Horizontal forms are built on grid classes.
 
 .form-horizontal .control-label {
-    padding-top: 6px;
+  padding-top: 6px;
+}
+
+.form-horizontal {
+  .form-group {
+    .make-row();
+  }
 }
 
 // Only right align form labels here when the columns stop stacking