Fixes #8150: add `.static-form-control` for vertical alignment of static form text

- Also fixes the vertical alignment of labels in horizontal layouts on
account of the recent button and input padding changes
- Also changes the vertical alignment of the checkboxes and radios in
horizontal forms

_includes/nav-css.html

@@ -56,6 +56,7 @@
     <li><a href="#forms-inline">Inline variation</a></li>
     <li><a href="#forms-horizontal">Horizontal variation</a></li>
     <li><a href="#forms-controls">Supported controls</a></li>
+    <li><a href="#forms-controls-static">Static form control</a></li>
     <li><a href="#forms-control-states">Control states</a></li>
     <li><a href="#forms-control-sizes">Control sizing</a></li>
     <li><a href="#forms-help-text">Help text</a></li>

css.html

@@ -1257,10 +1257,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-    <h2>Optional layouts</h2>
-    <p>Included with Bootstrap are optional form layouts for common use cases.</p>
-
-    <h3 id="forms-inline">Inline form</h3>
+    <h3 id="forms-inline">Inline form</h2>
     <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
     <div class="bs-callout bs-callout-danger">
       <h4>Requires custom widths</h4>
@@ -1289,7 +1286,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </form>
 {% endhighlight %}
 
-    <h3 id="forms-horizontal">Horizontal form</h3>
+    <h2 id="forms-horizontal">Horizontal form</h2>
     <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="form-group">
@@ -1485,6 +1482,39 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
+    <h2 id="forms-controls-static">Static text in horizontal forms</h2>
+    <p>When you need to place regular, static text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
+    <form class="bs-example form-horizontal">
+      <div class="form-group">
+        <label for="inputEmail" class="col-lg-2 control-label">Email</label>
+        <div class="col-lg-10">
+          <p class="form-control-static">email@example.com</p>
+        </div>
+      </div>
+      <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">
+        </div>
+      </div>
+    </form>
+{% highlight html %}
+<form class="form-horizontal">
+  <div class="form-group">
+    <label for="inputEmail2" class="col-lg-2 control-label">Email</label>
+    <div class="col-lg-10">
+      <p class="form-control-static">email@example.com</p>
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="inputPassword2" class="col-lg-2 control-label">Password</label>
+    <div class="col-lg-10">
+      <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
+    </div>
+  </div>
+</form>
+{% endhighlight %}
+
 
     <h2 id="forms-control-states">Form control states</h2>
     <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>

dist/css/bootstrap.css

@@ -1634,6 +1634,10 @@ textarea.input-sm {
   border-color: #468847;
 }
 
+.form-control-static {
+  padding-top: 6px;
+}
+
 .help-block {
   display: block;
   margin-top: 5px;
@@ -1663,7 +1667,7 @@ textarea.input-sm {
 .form-horizontal .control-label,
 .form-horizontal .radio-inline,
 .form-horizontal .checkbox-inline {
-  padding-top: 9px;
+  padding-top: 6px;
 }
 
 .form-horizontal .form-group:before,

less/forms.less

@@ -266,6 +266,17 @@ textarea {
 }
 
 
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+  margin-bottom: 0; // Remove default margin from `p`
+  padding-top: @padding-base-vertical;
+}
+
+
 // Help text
 //
 // Apply to any element you wish to create light text for placement immediately
@@ -316,7 +327,7 @@ textarea {
 .form-horizontal .control-label,
 .form-horizontal .radio-inline,
 .form-horizontal .checkbox-inline {
-  padding-top: 9px;
+  padding-top: @padding-base-vertical;
 }
 
 .form-horizontal {