fixes #4718: add vertical-align: middle; to .btn-group to ensure proper...

fixes #4718: add vertical-align: middle; to .btn-group to ensure proper alignment next to standard .btn

docs/assets/css/bootstrap.css

@@ -3388,6 +3388,7 @@ input[type="submit"].btn.btn-mini {
   *margin-left: .3em;
   font-size: 0;
   white-space: nowrap;
+  vertical-align: middle;
 }
 
 .btn-group:first-child {

less/button-groups.less

@@ -7,6 +7,7 @@
 .btn-group {
   position: relative;
   font-size: 0; // remove as part 1 of font-size inline-block hack
+  vertical-align: middle; // match .btn alignment given font-size hack above
   white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
   .ie7-restore-left-whitespace();
 }

less/tests/css-tests.html

@@ -597,6 +597,23 @@
   <h1>Forms</h1>
 </div>
 
+<h4>Buttons and button groups</h4>
+<form class="form-inline">
+  <button class="btn btn-success">Save</button>
+  <button class="btn btn-info">Add new</button>
+  <div class="btn-group">
+    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+      <i class="icon-user"></i> User
+      <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+      <li><a href="#">Profile</a></li>
+      <li class="divider"></li>
+      <li><a href="#">Sign Out</a></li>
+    </ul>
+  </div>
+</form>
+
 <h4>Horizontal form errors</h4>
 <form class="form-horizontal">
   <div class="control-group error">