Bootstrap固定頭項目不在手機上

我正在使用Bootstrap 3創建網站。頭部固定在筆記本電腦和手機上。但標題中的項目並未顯示在移動設備上。在移動設備上可以看到乾淨的固定標題。Bootstrap固定頭項目不在手機上

我使用了標題中的代碼是 -

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container myContainer"> 
    <div class="navbar-header"> 
     <div class="collapse navbar-collapse mynavbar"> 
         <ul class="nav navbar-nav myFont" > 
           <li><a href="#Values">Values</a></li> 
           <li><a href="#community">Community</a></li> 
           <li class="mylogo"><a href="#" class="navbar-brand"><img src="images/xyz-6.png" alt="" width="160px" height="50px" id="Logo"/></a></li> 
           <li><a href="#in">abc</a></li> 
           <li><a href="#aboutus">Who are we</a></li> 
         </ul> 
     </div> 
    </div>   
    </div> 
</nav>

和所使用的customed CSS是 -

.mylogo{ 
     margin-top : -15px; 
    } 
.navbar-nav>li>a{ 
     color: #000 !important; 
     font-size: 20px; 
     font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
    } 
.navbar-nav>li{ 
     padding: 5px 20px 5px 40px; 
    }

來源

2015-10-26 user2676132

你想你的導航欄，包括在移動設備上或只是一個鏈接導航欄可摺疊在桌面上顯示？ –

<div class="collapse navbar-collapse mynavbar">

從這個div（collapse和navbar-collapse）取下兩班。

來源

2015-10-26 23:17:43 makshh

您可以刪除摺疊以在移動設備上顯示整個菜單，但是您錯過了移動導航欄菜單按鈕以擁有適當的移動菜單。有關詳細信息，請參見Bootstrap documentation，並參閱this Bootply link進行演示。

總之，這個代碼添加到您的.navbar-headerdiv：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>

來源

2015-10-26 23:21:28

Bootstrap固定頭項目不在手機上

回答

相關問題