Bootstrap菜單未在手機上顯示

Question

我不知道為什么引導菜單沒有顯示在手機/平板電腦上？ 您可以在此處實時查看： https ： //simpleeats.cratejoy.com/

Answer 1

由於您的navbar-brand設置為100％寬度，因此實際上是在覆蓋navbar-toggle按鈕，因此，當您單擊切換按鈕時，您會直接回到索引頁面：請參見圖片。

您可以更改navbar-toggle類的z-index: 1060; （ z-index: 1060;起作用），也可以設置圖像的寬度。

旁注：由於您將菜單切換為打開狀態，因此會看到由於徽標附帶的img-responsive類而導致的某些不良行為，盡管您不需要此類。

固定寬度， navbar-brand圖像居中的工作演示。

 /**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">