Bootstrap导航栏通知徽章

希望这会有所帮助.I am building a website which allows users to send messages to each other. I get number of new messages using AJAX. Therefore, I just need to find a way how to display a badge in users's navbar.Here is what I want to achieve:I want the badge to be created using <span class="badge badge-pill badge-primary">1</span>.My code for navbar:<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-laravel" style="margin-bottom: 20px;"> <div class="container"> <a class="navbar-brand" href="#">Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Left Side Of Navbar --> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="messages">Messages <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">People <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Photos <span class="sr-only">(current)</span></a> </li> </ul> <!-- Right Side Of Navbar --> <ul class="navbar-nav ml-auto"> <li><a class="nav-link" href="#">Login</a></li> <li><a class="nav-link" href="#">Register</a></li> </ul> </div> </div></nav> 解决方案 according to the image you posted, you can add the badge in the messages parent <li> like : <li class="nav-item"> <span class="badge badge-pill badge-primary" style="float:right;margin-bottom:-10px;">1</span> <!-- your badge --> <a class="nav-link" href="messages">Messages <span class="sr-only">(current)</span></a></li>( assuming no javascript needed since you said you already have the ajax function ready to update the badge value ).ofcourse, you can extract the inline styling to an external stylesheet(here's a fiddle https://jsfiddle.net/k6x40tct/2/ )hope this helps. 这篇关于Bootstrap导航栏通知徽章的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！