2016-08-08 81 views
0

Ich habe ein Problem mit meiner Navbar Benachrichtigungsknopf, die Schaltfläche Größe der Navbar.Benötigen Sie Hilfe navbar notification button

example

Hier ist der Code

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

ich weiß nicht, wenn ein CSS-Problem oder was die Schaltfläche, um einen leeren Raum auf der Navigationsleiste erstellt.

posibily das Problem

+0

Dies könnte helfen - http://stackoverflow.com/questions/22735740/how-to-add-badge-on-top-of-font-awesome-symbol/22736017# 22736017 –

Antwort

0

Erstens ist, Knöpfe innen Links sind ungültig HTML so verwenden Sie entweder nur einen Link oder einfach nur einen Knopf ... beides nicht.

Sie müssen die zweite Spanne innerhalb die Taste (oder Link) und die Position es absolut.

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