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

Question

我正在 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>

我想要这样的东西:

Answer 1

不需要额外的 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;
}