Bootstrap菜单未在手机上显示

Question

I can't figure it out why the bootstrap menu is not showing on mobile/tablet ? You can see live here: https://simpleeats.cratejoy.com/

Answer 1

Because your navbar-brand is set to 100% width it's actually covering your navbar-toggle button, that's why when you click the toggle-button you're directed back to your index page: see image.

You can either change the z-index of your navbar-toggle class ( z-index: 1060; works) or set a width for the image.

Sidenote: you'll see some adverse behavior due to the img-responsive class attached to the logo when you toggle the menu open, you shouldn't need this class though.

Working Demo of fixed width, centered navbar-brand image.

 /**FOR DEMO ONLY**/ .navbar .navbar-brand { padding-top: 0; } .navbar .navbar-toggle.lefty { float: left; margin-left: 15px; } /**FOR DEMO ONLY**/ @media (max-width: 768px) { .navbar .navbar-brand { position: absolute; width: 200px; left: 50%; transform: translateX(-50%); background: red; } .navbar .navbar-brand img { margin: 0 auto; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <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="#"> <img src="http://placehold.it/150x50"> </a> <!--FOR DEMO ONLY --> <button type="button" class="navbar-toggle collapsed lefty" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!--FOR DEMO ONLY --> </div> <div class="collapse navbar-collapse" id="bs-nav"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> </li> <li><a href="#">Link</a> </li> </ul> </div> </nav> 

Answer 2

尝试添加aria-controls =“ bs-example-navbar-collapse-1”

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" aria-controls="bs-example-navbar-collapse-1">