css – Bootstrap 3中的glyph上的重叠通知徽章

前端之家收集整理的这篇文章主要介绍了css – Bootstrap 3中的glyph上的重叠通知徽章前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在bootstrap中创建一个注释/通知设置,似乎不能得到正确的对齐。

我要去一个很常见的布局,如这个截图:

…但我不能得到它lignup。 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

猜你在找的CSS相关文章