fix #3111, badge and label alignment with surrounding text

2 files changed, 29 insertions, 1 deletions

diff --git a/less/labels-badges.less b/less/labels-badges.less
index e29f2c4340..0fbd7bbc61 100644
--- a/less/labels-badges.less
+++ b/less/labels-badges.less
@@ -8,7 +8,7 @@
   font-weight: bold;
   line-height: 14px; // ensure proper line-height if floated
   color: @white;
-  vertical-align: middle;
+  vertical-align: baseline;
   white-space: nowrap;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   background-color: @grayLight;
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index 58e25be612..a39dde53db 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -462,6 +462,10 @@
 <!-- Tabs
 ================================================== -->
 
+<div class="page-header">
+  <h1>Tabs</h1>
+</div>
+
 <div class="tabbable tabs-left" style="margin-bottom: 18px;">
   <ul class="nav nav-tabs">
     <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
@@ -502,6 +506,30 @@
 
 
 
+<!-- Labels
+================================================== -->
+
+<div class="page-header">
+  <h1>Labels</h1>
+</div>
+
+<div class="row">
+  <div class="span4">
+    <h4>Inline label</h4>
+    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam <span class="label label-warning">Label name</span> eget risus varius blandit sit amet non magna. Fusce <code>.class-name</code> dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+  </div><!--/span-->
+  <div class="span4">
+    <form class="form-horizontal">
+      <label>Example label</label>
+      <input type="text" placeholder="Input"> <span class="help-inline"><span class="label">Hey!</span> Read this.</span>
+    </form>
+  </div><!--/span-->
+  <div class="span4">
+
+  </div><!--/span-->
+</div><!--/row-->
+
+