fix #3111, badge and label alignment with surrounding text

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 00485499fd9b77c665c3d024417092f6bd614ae0..43bba2beece2a8a99988ce9aaaee187cfbe15402 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3740,7 +3740,7 @@ a.thumbnail:hover {
   font-weight: bold;
   line-height: 14px;
   color: #ffffff;
-  vertical-align: middle;
+  vertical-align: baseline;
   white-space: nowrap;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #999999;

diff --git a/less/labels-badges.less b/less/labels-badges.less
index e29f2c43408105ac60e695b8d93c8590b238cbd1..0fbd7bbc61df7fead771055571a17478b4d19fbd 100644 (file)
--- 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 58e25be612d604b7d63787ffd61a8b554bf5a323..a39dde53db4ee886f2ff0c49491dd39100ade677 100644 (file)
--- 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-->
+
+