2016-07-02 140 views
1

我正在嘗試使用bootstrap構建我的導航欄,但我遇到了一些問題,當我有一個小屏幕或窗口時,移動菜單按鈕不會出現在右側角落。我做錯了什麼?小屏幕上的Bootstrap菜單按鈕

<nav class="navbar navbar-fixed-top"> 
    <div 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 navbar-right"> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#blog">Blog</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
</nav> 

和我的CSS:

.navbar{ 
    background-color:#fff; 
    border-bottom:1px solid black; 
} 


.navbar-nav > li > a{ 
    color:#1E88E5 !important; 
    font-size:16px !important; 
    font-weight:bold !important; 
    display: block !important; 
    background-color:#fff !important; 
} 

.navbar-nav > li > a:hover{ 
    color:#673ab7 !important; 
    background-color:#f0f5f5 !important; 
} 
+0

您是否檢查過包含js,如jquery.js,bootstrap.min.js – vignesh

回答

1

你忘了導航欄樣式類在nav元素(navbar-defaultnavbar-inverse)。樣式切換按鈕取決於這個類。

<nav class="navbar navbar-default navbar-fixed-top"> 
+0

是的,使用navbar-default並改變了這個類的外觀解決了它,謝謝! – mheonyae

0

包括bootstrap.min.css中的鏈接會做& bootstrap.css。

+0

我包括了一切 – mheonyae

相關問題