Fixes #12759

Ensures proper sizing and alignment of input groups within inline and
navbar forms.

* Uses `inline-table` on the input group
* Nukes the widths to `width: auto`—without this, the parent input
group doesn’t size correctly and functions as `display: table;` or
`block`

dist/css/bootstrap-rtl.css

@@ -3339,6 +3339,17 @@ select[multiple].input-lg {
     vertical-align: middle;
   }
 
+  .form-inline .input-group {
+    display: inline-table;
+    vertical-align: middle;
+  }
+
+  .form-inline .input-group .input-group-addon,
+  .form-inline .input-group .input-group-btn,
+  .form-inline .input-group .form-control {
+    width: auto;
+  }
+
   .form-inline .input-group > .form-control {
     width: 100%;
   }
@@ -4902,6 +4913,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     vertical-align: middle;
   }
 
+  .navbar-form .input-group {
+    display: inline-table;
+    vertical-align: middle;
+  }
+
+  .navbar-form .input-group .input-group-addon,
+  .navbar-form .input-group .input-group-btn,
+  .navbar-form .input-group .form-control {
+    width: auto;
+  }
+
   .navbar-form .input-group > .form-control {
     width: 100%;
   }

dist/css/bootstrap.css

@@ -2591,6 +2591,15 @@ select[multiple].input-lg {
     width: auto;
     vertical-align: middle;
   }
+  .form-inline .input-group {
+    display: inline-table;
+    vertical-align: middle;
+  }
+  .form-inline .input-group .input-group-addon,
+  .form-inline .input-group .input-group-btn,
+  .form-inline .input-group .form-control {
+    width: auto;
+  }
   .form-inline .input-group > .form-control {
     width: 100%;
   }
@@ -3919,6 +3928,15 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     width: auto;
     vertical-align: middle;
   }
+  .navbar-form .input-group {
+    display: inline-table;
+    vertical-align: middle;
+  }
+  .navbar-form .input-group .input-group-addon,
+  .navbar-form .input-group .input-group-btn,
+  .navbar-form .input-group .form-control {
+    width: auto;
+  }
   .navbar-form .input-group > .form-control {
     width: 100%;
   }

docs/css.html

@@ -1649,6 +1649,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <label class="sr-only" for="exampleInputEmail2">Email address</label>
         <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
       </div>
+      <div class="form-group">
+        <div class="input-group">
+          <div class="input-group-addon">@</div>
+          <input class="form-control" type="email" placeholder="Enter email">
+        </div>
+      </div>
       <div class="form-group">
         <label class="sr-only" for="exampleInputPassword2">Password</label>
         <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">

less/forms.less

@@ -368,6 +368,18 @@ input[type="checkbox"],
       width: auto; // Prevent labels from stacking above inputs in `.form-group`
       vertical-align: middle;
     }
+
+    .input-group {
+      display: inline-table;
+      vertical-align: middle;
+
+      .input-group-addon,
+      .input-group-btn,
+      .form-control {
+        width: auto;
+      }
+    }
+
     // Input groups need that 100% width though
     .input-group > .form-control {
       width: 100%;