需要帮助导航栏通知按钮

Question

我的导航栏通知按钮有问题，按钮调整导航栏的大小。

这是代码

.badge-notify{
           background:red;
           position:relative;
           top: -20px;
           left: -35px;
        }

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">

        
          <button class="btn btn-lg btn-link">
            <span class="glyphicon glyphicon-envelope"></span>
          </button>
          <span class="badge badge-notify">3</span>
        

        </a></li>

我不知道是 css 问题还是什么，按钮在导航栏上创建了一个空白 space。

可能问题是

Answer 1

首先，link 中的按钮无效 HTML，因此要么只使用一个 link，要么只使用一个按钮...不能同时使用。

您需要将第二个 span 放在按钮（或 link）内，并绝对放置它。

.btn-link {
  position: relative;
}

.badge-notify {
  background: red;
  position: absolute !important;
  top: -15px; /* adjust as required*/
  right: 5px; /* adjust as required*/
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-center">
  <li>
    <button class="btn btn-lg btn-link">
      <span class="glyphicon glyphicon-envelope"></span>
      <span class="badge badge-notify">3</span>
    </button>
  </li>
</ul>

需要帮助导航栏通知按钮

Need help navbar notification button

html

css

notifications

button

navbar