fixes #9382: inline forms now require use of .form-group for proper a…

…lignment of all form controls
twbs · Aug 12, 2013 · f662dff · f662dff
1 parent a9a27d3
commit f662dff
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 68 deletions.
diff --git a/assets/css/docs.css b/assets/css/docs.css
@@ -437,11 +437,6 @@ body {
 }
 
 /* Forms */
-.bs-example.form-inline select,
-.bs-example.form-inline input[type="text"],
-.bs-example.form-inline input[type="password"] {
-  width: 180px;
-}
 .bs-example-control-sizing select,
 .bs-example-control-sizing input[type="text"] + input[type="text"] {
   margin-top: 10px;

diff --git a/css.html b/css.html
@@ -1394,10 +1394,14 @@ <h4>Always add labels</h4>
       <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
     </div>
     <form class="bs-example form-inline" role="form">
-      <label class="sr-only" for="exampleInputEmail">Email address</label>
-      <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
-      <label class="sr-only" for="exampleInputPassword">Password</label>
-      <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
+      <div class="form-group">
+        <label class="sr-only" for="exampleInputEmail">Email address</label>
+        <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
+      </div>
+      <div class="form-group">
+        <label class="sr-only" for="exampleInputPassword">Password</label>
+        <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
+      </div>
       <div class="checkbox">
         <label>
           <input type="checkbox"> Remember me
@@ -1407,10 +1411,14 @@ <h4>Always add labels</h4>
     </form><!-- /example -->
 {% highlight html %}
 <form class="form-inline" role="form">
-  <label class="sr-only" for="exampleInputEmail">Email address</label>
-  <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
-  <label class="sr-only" for="exampleInputPassword">Password</label>
-  <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
+  <div class="form-group">
+    <label class="sr-only" for="exampleInputEmail">Email address</label>
+    <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
+  </div>
+  <div class="form-group">
+    <label class="sr-only" for="exampleInputPassword">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
+  </div>
   <div class="checkbox">
     <label>
       <input type="checkbox"> Remember me

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
@@ -1823,23 +1823,27 @@ textarea.input-sm {
   color: #737373;
 }
 
-.form-inline .form-control,
-.form-inline .radio,
-.form-inline .checkbox {
-  display: inline-block;
-}
-
-.form-inline .radio,
-.form-inline .checkbox {
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.form-inline .radio input[type="radio"],
-.form-inline .checkbox input[type="checkbox"] {
-  float: none;
-  margin-left: 0;
+@media (min-width: 768px) {
+  .form-inline .form-group {
+    display: inline-block;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+  .form-inline .form-control {
+    width: auto;
+  }
+  .form-inline .radio,
+  .form-inline .checkbox {
+    display: inline-block;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .form-inline .radio input[type="radio"],
+  .form-inline .checkbox input[type="checkbox"] {
+    float: none;
+    margin-left: 0;
+  }
 }
 
 .form-horizontal .control-label,
@@ -3148,23 +3152,27 @@ button.close {
   margin-bottom: 8px;
 }
 
-.navbar-form .form-control,
-.navbar-form .radio,
-.navbar-form .checkbox {
-  display: inline-block;
-}
-
-.navbar-form .radio,
-.navbar-form .checkbox {
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.navbar-form .radio input[type="radio"],
-.navbar-form .checkbox input[type="checkbox"] {
-  float: none;
-  margin-left: 0;
+@media (min-width: 768px) {
+  .navbar-form .form-group {
+    display: inline-block;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+  .navbar-form .form-control {
+    width: auto;
+  }
+  .navbar-form .radio,
+  .navbar-form .checkbox {
+    display: inline-block;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .navbar-form .radio input[type="radio"],
+  .navbar-form .checkbox input[type="checkbox"] {
+    float: none;
+    margin-left: 0;
+  }
 }
 
 .navbar-nav > li > .dropdown-menu {
@@ -4712,7 +4720,6 @@ a.list-group-item.active > .badge,
 }
 
 @media screen and (min-width: 768px) {
-  .carousel-control .glyphicon,
   .carousel-control .icon-prev,
   .carousel-control .icon-next {
     width: 30px;

diff --git a/dist/css/bootstrap.min.css b/dist/css/bootstrap.min.css
diff --git a/less/forms.less b/less/forms.less
@@ -293,28 +293,44 @@ textarea {
 
 // Inline forms
 //
-// Make forms appear inline(-block).
+// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
+// forms begin stacked on extra small (mobile) devices and then go inline when
+// viewports reach <768px.
+//
+// Requires wrapping inputs and labels with `.form-group` for proper display of
+// default HTML form controls and our custom form controls (e.g., input groups).
 
 .form-inline {
-  .form-control,
-  .radio,
-  .checkbox {
-    display: inline-block;
-  }
 
-  // Remove default margin on radios/checkboxes that were used for stacking, and
-  // then undo the floating of radios and checkboxes to match (which also avoids
-  // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
-  .radio,
-  .checkbox {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-left: 0;
-  }
-  .radio input[type="radio"],
-  .checkbox input[type="checkbox"] {
-    float: none;
-    margin-left: 0;
+  // Kick in the inline
+  @media (min-width: @screen-tablet) {
+    // Inline-block all the things for "inline"
+    .form-group  {
+      display: inline-block;
+      margin-bottom: 0;
+      vertical-align: middle;
+    }
+
+    // Reset form control's default 100% width
+    .form-control {
+      width: auto;
+    }
+
+    // Remove default margin on radios/checkboxes that were used for stacking, and
+    // then undo the floating of radios and checkboxes to match (which also avoids
+    // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
+    .radio,
+    .checkbox {
+      display: inline-block;
+      margin-top: 0;
+      margin-bottom: 0;
+      padding-left: 0;
+    }
+    .radio input[type="radio"],
+    .checkbox input[type="checkbox"] {
+      float: none;
+      margin-left: 0;
+    }
   }
 }