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

您可以通过将position: relative;设置为父级，将position absolute; top: -5px; right: -5px;设置为子级来实现。

.includer{
 position: relative;
}

.badge.badge-success{
 background-color: yellow;
 position: absolute; 
 top: -5px;
 right: -5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

<div>
  <button class="btn btn-primary btn-lg navbar-btn includer">
      <i class="fas fa-file-invoice-dollar fa-lg"></i>
      <span class="badge badge-success">1</span>
  </button>
  <button class="btn btn-primary btn-lg navbar-btn">
      <i class="fas fa-envelope fa-lg"></i>
  </button>
  <button class="btn btn-primary btn-lg navbar-btn">
      <i class="fas fa-cogs fa-lg"></i>
  </button>
  <button class="btn btn-outline-danger btn-lg" onClick={this.logoutClicked}>
      <i class="fas fa-sign-out-alt fa-lg"></i>
  </button>
</div>

Answer 2

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

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

2 个答案: