时间戳

首页 > 解决方案 > 将徽章放在右上角 - 引导程序 4

css - 将徽章放在右上角 - 引导程序 4

问题描述

我正在引导程序中构建一个 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>

我想要这样的东西：

我想要的是

标签： cssreactjsbootstrap-4

解决方案

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

推荐阅读