如何使以导航响应为中心的导航栏

Question

我已使导航栏稍微居中，但是似乎响应性不是很好。 另外，当我折叠菜单时，我的汉堡菜单也不会出现。 任何提示都很棒！

 .navbar-header { height: 90px; } .navbar li { display: inline; padding-top: 20px; float: center; text-align: center; } .navbar { background: #003643; } .navbar li a, .navbar .navbar-brand { color: #ABD7DE !important; font-size: 20px; font-family: 'Lobster', cursive; text-aline: center; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #284047 !important; background-color: #ABD7DE !important; } #logo { max-height:150px; border: none; border-radius: 50%; margin-top: -5px; margin-left: 15px; } #nav .navbar-header{ max-width: 900px; margin-left: 322px; margin-right: auto; } .jumbotron { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/mountain.jpeg); height: 700px; repeat: none; font-family: 'Lobster', cursive; color: black; margin-bottom: 0px; text-shadow: 1px 1px black; } .button-primary { background: #B1DBDF; padding: 20px; font-size: 20px; border: none; border-radius: 20px; padding-left: 40px; padding-right: 40px; margin-top: 20px; } 

 <nav class="navbar navbar-fixed-top"> <div id="nav" class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <a class="navbar-brand" href="#"><img id="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/Portfolio_pic.jpg" alt="Zachary" /></a> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> <div class="jumbotron text-center"> <div class="container"> <div style="margin-top:180px" class="row"> <h1>Welcome to my Portfolio!</h1> <h3>I'm so glad you stopped by!</h3> <button class="button-primary">Let's get started!</button> </div> </div> </div> 

Answer 1

 .navbar-header { height: 90px; } .navbar li { display: inline; padding-top: 20px; float: center; text-align: center; } .navbar { background: #003643; } .navbar li a, .navbar .navbar-brand { color: #ABD7DE !important; font-size: 20px; font-family: 'Lobster', cursive; text-aline: center; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #284047 !important; background-color: #ABD7DE !important; } #logo { max-height:150px; border: none; border-radius: 50%; margin-top: -5px; margin-left: 15px; } #nav .navbar-header{ max-width: 900px; margin-left: 322px; margin-right: auto; } .jumbotron { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/mountain.jpeg); height: 700px; repeat: none; font-family: 'Lobster', cursive; color: black; margin-bottom: 0px; text-shadow: 1px 1px black; } .button-primary { background: #B1DBDF; padding: 20px; font-size: 20px; border: none; border-radius: 20px; padding-left: 40px; padding-right: 40px; margin-top: 20px; } .navbar .navbar-nav { display: inline-block; float: none; } .navbar .navbar-collapse { text-align: center; } 

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav class="navbar navbar-fixed-top"> <div id="nav" class="container "> <div class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <a class="navbar-brand" href="#"><img id="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/Portfolio_pic.jpg" alt="Zachary" /></a> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> <div class="jumbotron text-center"> <div class="container"> <div style="margin-top:180px" class="row"> <h1>Welcome to my Portfolio!</h1> <h3>I'm so glad you stopped by!</h3> <button class="button-primary">Let's get started!</button> </div> </div> </div>