css - 将徽章放在右上 Angular - bootstrap 4

我正在使用Bootstrap构建一个NavBar（使用React）。
我想在按钮的右上角放置一个徽章。

这是当前情况：

<div>
                        <button className="btn btn-primary btn-lg navbar-btn">
                            <i class="fas fa-file-invoice-dollar fa-lg"></i>
                            <span class="badge badge-success">1</span>
                        </button>
                        <button className="btn btn-primary btn-lg navbar-btn">
                            <i class="fas fa-envelope fa-lg"></i>
                        </button>
                        <button className="btn btn-primary btn-lg navbar-btn">
                            <i class="fas fa-cogs fa-lg"></i>
                        </button>
                        <button className="btn btn-outline-danger btn-lg" onClick={this.logoutClicked}>
                            <i class="fas fa-sign-out-alt fa-lg"></i>
                        </button>
                    </div>

我想要这样的东西：

最佳答案

不需要额外的CSS。将徽章跨度包裹在sup中...

<sup><span class="badge badge-success">1</span></sup>

https://www.codeply.com/go/3vc5PlgpTe

仅供参考，重新启动允许它起作用，这会在sup标记上设置以下样式...

sup {
    top: -.5em;
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

关于css - 将徽章放在右上 Angular - bootstrap 4，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56207787/