带有小徽章的Glyphicon

Question

您好我想制作一个带有徽章的通知glyphicon，通知编号如下

我在stackoverflow中的另一个问题上找到了这个代码，但是长文本徽章不能保持他的位置 有人可以帮助我提供响应式解决方案 glyphicon的按钮不是必要的，相反没有它更好

HTML

<button class="btn btn-default btn-lg" style="font-size:36px;">
  <span class="glyphicon glyphicon-user"></span>
</button>
<span class="badge badge-notify">9</span>

CSS

.badge-notify{
   background:red;
   position:relative;
   top: -20px;
   left: -35px;
   width: auto;
  }

Answer 1

您可能需要添加父position: absolute并为徽章本身body {padding: 50px;} .badge-holder {position: relative; display: inline-block;} .badge {position: absolute; top: -10px; right: -10px;}。这样的事情可以做到：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="badge-holder">
  <button class="btn btn-default btn-lg" style="font-size:36px;">
    <span class="glyphicon glyphicon-user"></span>
  </button>
  <span class="badge badge-notify">9</span>
</div>

body {padding: 50px;}
.badge-holder {position: relative; display: inline-block;}
.badge {position: absolute; top: 5px; right: 12px;}

或者如果你想要的东西与你问的完全一样：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="badge-holder">
  <button class="btn btn-default btn-lg" style="font-size:36px;">
    <span class="glyphicon glyphicon-user"></span>
  </button>
  <span class="badge badge-notify">9</span>
</div>

9

将徽章的内容限制为缩短的内容确实是明智之举。就像9+之后#include <stdio.h> int* findLargest(int* arr,int size){ return &arr[size-1]; } int main(){ int size=3; int arr[3]={3,4,5}; int* largest=&arr[size-1]; int* largest2=malloc(100); largest2=findLargest(arr,size);//Not findLargest(*arr,size) printf("%d",*largest2); } 或其他内容一样。