Bootstrap菜單沒有顯示在手機上

Question

我無法弄清楚爲什麼bootstrap菜單沒有顯示在手機/平板電腦上？ 你可以看到住在這裏：https://simpleeats.cratejoy.com/

Answer 1

試加詠歎調的控件= 「BS-例如，導航欄崩潰-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"> 

Answer 2

因爲你navbar-brand被設置爲100％的寬度它實際上涉及您的navbar-toggle按鈕，這就是爲什麼當您單擊切換按鈕時，您將被引導回您的索引頁面：請參閱圖像。

你可以改變你的navbar-toggle類的z指數（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>