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

我正在尝试在 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;
  }

最佳答案

尝试这个:

/* 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>

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