Question

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

这是代码

＆＃13;

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

＆＃13;

      <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>

＆＃13;

我不知道是否有css问题或者是什么，该按钮会在导航栏上创建一个空白区域。

可能问题是

Answer 1

首先，链接内的按钮是无效的HTML，所以要么只使用链接，要么只使用按钮......不是两者都有。

您需要将第二个范围置于按钮（或链接）内，并将其置于绝对位置。

.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>

需要帮助导航栏通知按钮

1 个答案: