讓按鈕顯示在合攏的導航欄中

Question

這是我第一次嘗試建立一個網站。我到目前爲止已經設置了我的導航欄，但是我希望確保在縮小屏幕時將正確的元素摺疊到下拉按鈕中。到目前爲止，我有這個，即使光標感覺它需要做按鈕應該做的事情，按鈕也不會顯示出來。

<nav class="navbar-wrapper"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> <!--I am looking to organize these elements on right hand side of page--> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="index.html">Sash Illustration</a 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li class="active"><a href="index.html">Home</a></li> 
 
       <!--<div id="navBar">--> 
 
       <li><a href="about.html">About Me</a></li> 
 
       <li><a href="contact.html">Contact</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav>

Answer 1

按鈕是有使用CSS

.navbar-toggle { 
 
    position: relative; 
 
    float: right; 
 
    padding: 9px 10px; 
 
    margin-top: 8px; 
 
    margin-right: 15px; 
 
    margin-bottom: 8px; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    border: 1px solid #333333; 
 
    border-radius: 4px; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar-wrapper"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <!--I am looking to organize these elements on right hand side of page--> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="index.html">Sash Illustration</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="active"><a href="index.html">Home</a> 
 
     </li> 
 
     <!--<div id="navBar">--> 
 
     <li><a href="about.html">About Me</a> 
 
     </li> 
 
     <li><a href="contact.html">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>