我正在 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 - 将徽章放在右上角 - bootstrap 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56207787/