Fixes #12843: Scope label styles for horizontal forms to a media query so their narrow viewport display looks just like a normal form

dist/css/bootstrap-rtl.css

@@ -3368,7 +3368,6 @@ select[multiple].input-lg {
   }
 }
 
-.form-horizontal .control-label,
 .form-horizontal .radio,
 .form-horizontal .checkbox,
 .form-horizontal .radio-inline,
@@ -3395,6 +3394,8 @@ select[multiple].input-lg {
 
 @media (min-width: 768px) {
   .form-horizontal .control-label {
+    padding-top: 7px;
+    margin-bottom: 0;
     text-align: left;
   }
 }

dist/css/bootstrap.css

@@ -2615,7 +2615,6 @@ select[multiple].input-lg {
     top: 0;
   }
 }
-.form-horizontal .control-label,
 .form-horizontal .radio,
 .form-horizontal .checkbox,
 .form-horizontal .radio-inline,
@@ -2638,6 +2637,8 @@ select[multiple].input-lg {
 }
 @media (min-width: 768px) {
   .form-horizontal .control-label {
+    padding-top: 7px;
+    margin-bottom: 0;
     text-align: right;
   }
 }

less/forms.less

@@ -413,8 +413,9 @@ input[type="checkbox"],
 
 .form-horizontal {
 
-  // Consistent vertical alignment of labels, radios, and checkboxes
-  .control-label,
+  // Consistent vertical alignment of radios and checkboxes
+  //
+  // Labels also get some reset styles, but that is scope to a media query below.
   .radio,
   .checkbox,
   .radio-inline,
@@ -440,10 +441,13 @@ input[type="checkbox"],
     padding-bottom: (@padding-base-vertical + 1);
   }
 
-  // Only right align form labels here when the columns stop stacking
+  // Reset spacing and right align labels, but scope to media queries so that
+  // labels on narrow viewports stack the same as a default form example.
   @media (min-width: @screen-sm-min) {
     .control-label {
       text-align: right;
+      margin-bottom: 0;
+      padding-top: (@padding-base-vertical + 1); // Default padding plus a border
     }
   }