Bootstrap navigation bar groping for a long time, or the left and right will not be horizontal alignment, or the color is not the same, rookie finally fix, directly put the code here, and then directly with
<! DOCTYPE html><html lang="ZH-CN"> <head> <meta charset="Utf-8"> <meta http-equiv="x-ua-compatible" content="Ie=edge" > <meta name="viewport" content="Width=device-width, initial-scale=1 "> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet" > </head> <body> <nav class="NavBar navbar-default" role = "navigation" > <div class="container"> <!--Brand and toggle get grouped for better mobile display -- <div class="Navbar-header"> <button type="button" class="Navbar-toggle collapsed" Data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="Sr-only">Toggle Navigation</span> <span class="Icon-bar"></span> <span class="Icon-bar"></span> <span class="Icon-bar"></span> </button> <a class="Navbar-brand" href="#">KKK</a> </div> <div class="Collapse Navbar-collapse" id=" Bs-example-navbar-collapse-1 "> <ul class="nav navbar-nav"> <li><a href="#">Home<span class="Sr-only"></span></a></li> </ul> <div class="Navbar-right"> <ul class="nav navbar-nav"> <li><a href="#">haha<span class="Sr-only"></span></a></li> <li><a href="#">haha<span class="Sr-only"></span></a></li> </ul> </div> </div> </div></nav> <script src="Js/jquery.min.js"></script> <script src="Js/bootstrap.min.js"></script> </body></html>
Look at the results.
Bootstrap making navigation bar