重叠通知徽章在Bootstrap 3的字形 [英] overlap notification badge on glyph in Bootstrap 3

问题描述

我尝试在引导程序中创建注释/通知设置，似乎无法获得正确的对齐。

I'm trying to create a comment/notification setup in bootstrap, and can't seem to get the alignment right.

我要去一个漂亮的

...但我不能得到它。 这是一个Bootply 我的尝试。

...but I can't get it to lignup. Here's a Bootply of my attempt.

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;
  }

推荐答案

>

Try this:

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

这篇关于重叠通知徽章在Bootstrap 3的字形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！