無法使導航按鈕在lg和md視圖中消失，無法下拉菜單按鈕

Question

我希望從編譯一個簡單的響應式網站時我無法解決的問題尋求一些建議。

導航按鈕不應該出現，在xs視圖中應該激活下拉框。

我正在使用Twitter引導程序。

這裏是我的編碼：

<nav id="header-nav" class="navbar navbar-default"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <div class="navbar-brand"> 
       <a href="index-html"><h1>Food, LLC</h1></a> 
      </div> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-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> 
     </div> 

     <div id="collapsable-nav" class="collapse navbar-collapse"> 
     <ul id="nav-list" class="nav navbar-nav navbar-right"> 
      <li> 
       <a href="chicken.html"><span class="visible-xs"></span>Chicken</a> 
      </li> 
      <li> 
       <a href="beef.html"><span class="visible-xs"></span>Beef</a> 
      </li> 
      <li> 
       <a href="seafood.html"><span class="visible-xs"></span>Seafood</a> 
      </li> 
      </ul> 

的CSS代碼如下：

body { 
    font-size: 16px; 
    color: #F0FFFF; 
    background-color: #778899; 
    font-family: 'Source Sans Pro', sans-serif; 

#header-nav { 
    background-color: #2F4F4F; 
    border-radius: 0; 
    border: 0; 
    padding: 25px; 
} 
.navbar-brand h1 { /**Restaurant name**/ 
    font-family: 'Jura', sans-serif; 
    color: #FFFFFF; 
    font-size: 2em; 
    font-weight: bolder; 
    text-shadow: 1.5px 1.5px #FFD700; 
    margin-top: 0; 
    margin-bottom: 0; 
    line-height: 0.5; 
} 
.navbar-brand a:hover, .navbar-brand a:focus { 
    text-decoration: none; 
} 
#nav-list { 
    margin-top: 10px; 
} 
#nav-list a { 
    color: #FFFAF0; 
    text-align: center; 
} 
#nav-list a:hover { 
    background: #FFD700; 
} 
#nav-list a span { 
    font-size: 1.5em; 
} 

可能有人善意指出，我在哪裏呢？爲什麼我仍然能夠看到標題處的導航按鈕？爲什麼在xs視圖中菜單不下拉？

謝謝，感謝幫助！

Answer 1

試試這個工作對我來說

<meta name="viewport" content="width=device-width, initial-scale=1"> 


    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<nav id="header-nav" class="navbar navbar-default"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <div class="navbar-brand"> 
       <a href="index-html"><h1>Food, LLC</h1></a> 
      </div> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-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> 
     </div> 

    <div id="collapsable-nav" class="collapse navbar-collapse"> 
    <ul id="nav-list" class="nav navbar-nav navbar-right"> 
     <li> 
      <a href="chicken.html"><span class="visible-xs"></span>Chicken</a> 
     </li> 
     <li> 
      <a href="beef.html"><span class="visible-xs"></span>Beef</a> 
     </li> 
     <li> 
      <a href="seafood.html"><span class="visible-xs"></span>Seafood</a> 
     </li> 
     </ul> 
    </div> 
</div>