Updates the native and custom checks to use flexbox

- Removes absolute positioning and relies on flexbox for input+label layout and spacing
- Adjusts the gutter variables to be true gutters, not gutters plus space for input
- Updates inline variants accordingly

This is an implementation of #25174, and a more complete attempt than #25175 at implementing it across all our checks.

scss/_custom-forms.scss

@@ -9,9 +9,7 @@
 
 .custom-control {
   position: relative;
-  display: block;
-  min-height: (1rem * $line-height-base);
-  padding-left: $custom-control-gutter;
+  display: flex;
 }
 
 .custom-control-inline {
@@ -57,16 +55,15 @@
 // Build the custom controls out of psuedo-elements.
 
 .custom-control-label {
+  display: flex;
   margin-bottom: 0;
 
   // Background-color and (when enabled) gradient
   &::before {
-    position: absolute;
-    top: (($line-height-base - $custom-control-indicator-size) / 2);
-    left: 0;
     display: block;
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
+    margin-top: (($line-height-base - $custom-control-indicator-size) / 2);
     pointer-events: none;
     content: "";
     user-select: none;
@@ -87,6 +84,10 @@
     background-position: center center;
     background-size: $custom-control-indicator-bg-size;
   }
+
+  &:not(:empty)::before {
+    margin-right: $custom-control-gutter;
+  }
 }
 
 

scss/_forms.scss

@@ -207,14 +207,12 @@ select.form-control-lg {
 
 .form-check {
   position: relative;
-  display: block;
-  padding-left: $form-check-input-gutter;
+  display: flex;
 }
 
 .form-check-input {
-  position: absolute;
   margin-top: $form-check-input-margin-y;
-  margin-left: -$form-check-input-gutter;
+  margin-right: $form-check-input-gutter;
 
   &:disabled ~ .form-check-label {
     color: $text-muted;
@@ -228,15 +226,12 @@ select.form-control-lg {
 .form-check-inline {
   display: inline-flex;
   align-items: center;
-  padding-left: 0; // Override base .form-check
   margin-right: $form-check-inline-margin-x;
 
   // Undo .form-check-input defaults and add some `margin-right`.
   .form-check-input {
-    position: static;
     margin-top: 0;
     margin-right: $form-check-inline-input-margin-x;
-    margin-left: 0;
   }
 }
 

scss/_variables.scss

@@ -423,7 +423,7 @@ $input-transition:                      border-color .15s ease-in-out, box-shado
 
 $form-text-margin-top:                  .25rem !default;
 
-$form-check-input-gutter:               1.25rem !default;
+$form-check-input-gutter:               .5rem !default;
 $form-check-input-margin-y:             .3rem !default;
 $form-check-input-margin-x:             .25rem !default;
 
@@ -436,7 +436,7 @@ $input-group-addon-color:               $input-color !default;
 $input-group-addon-bg:                  $gray-200 !default;
 $input-group-addon-border-color:        $input-border-color !default;
 
-$custom-control-gutter:                 1.5rem !default;
+$custom-control-gutter:                 .5rem !default;
 $custom-control-spacer-x:               1rem !default;
 
 $custom-control-indicator-size:         1rem !default;