如何在Bootstrap中将badge放置在icon的顶部？

要实现badge固定在图标右上角的效果，你可以通过CSS定位实现，具体方案如下：

现有HTML结构无需调整 #

你当前的代码可以直接复用：

<li class="nav-item mr-3">
    <a href="#" class="nav-link nav-icon">
        <i class="uil uil-bell">
           <span class="badge badge-light">2</span>
        </i>
    </a>
</li>

新增对应CSS样式即可 #

/* 给图标容器设置相对定位，作为badge的定位参照 */
.uil-bell {
    position: relative;
    display: inline-block;
}

/* 给badge设置绝对定位，调整到图标右上角位置 */
.uil-bell .badge {
    position: absolute;
    /* 以下数值可根据你的图标尺寸、设计需求自由微调 */
    top: -6px;
    right: -8px;
}

如果项目中存在多个同类型的图标带badge的场景，建议给对应元素加上自定义类名限定样式范围，避免影响其他组件的样式。

内容的提问来源于stack exchange，提问作者Alghany Jagad