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

…proper alignment next to standard .btn
hc5duke · Aug 27, 2012 · 22c4f3d · 22c4f3d
1 parent 1531741
commit 22c4f3d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/docs/assets/css/bootstrap.css b/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 {

diff --git a/less/button-groups.less b/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();
 }

diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
@@ -597,6 +597,23 @@ <h4>Fluid grid sizing</h4>
   <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">