css - Bootstrap 3 字形上的重叠通知标记

Question

我正在尝试在 Bootstrap 中创建评论/通知设置，但似乎无法正确对齐。

我打算使用一个非常常见的布局，如这个屏幕截图所示:

...但我无法将其注册。 <强> Here's a Bootply 我的尝试。

HTML:

<div class="container">
  <button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
    <span class="glyphicon glyphicon-comment"></span>
  </button>
  <span class="badge badge-notify">3</span>
</div>

CSS:

.badge-notify{
   background:red;
   position:absolute;
   top:0px;
  }

Answer 1

试试这个:

/* CSS used here will be applied after bootstrap.css */
.badge-notify{
   background:red;
   position:relative;
   top: -20px;
   left: -35px;
}


<div class="container">
  <button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
    <span class="glyphicon glyphicon-comment"></span>
  </button>
  <span class="badge badge-notify">3</span>
</div>

Bootstrap :http://www.bootply.com/7teIvGLIzY