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>