我的導航欄未顯示在移動設備上

Question

我無法讓我的代碼在移動設備上工作。我想讓導航欄顯示爲可摺疊的標籤，但它不會以這種方式顯示。我不確定是由於自定義樣式還是由於缺少或添加了導航欄中的內容。我添加了該標誌，因爲我不確定這是否會導致導航欄失靈。提前致謝。

</div> 
    <div class="logo"> 
    <p><a href="index.html">Title Here</a></p> 
    </div> 
    <!-- Navigation --> 
    <nav class="navbar navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1"> 
        <ul class="nav navbar-nav"> 
        <li> 
         <a href="bio.html">Bio</a> 
        </li> 
        <li> 
         <a href="lessons.html">Lessons</a> 
        </li> 
        <li> 
         <a href="shows.html">Shows</a> 
        </li> 
        <li> 
         <a href="music.html">Music</a> 
        </li> 
        <li> 
         <a href="contact.html">Contact</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 
<pre> and this is the customstyle.css</pre> 
    .navbar .navbar-nav { 
    position:absolute; 
    display: inline-block; 
    left:33%; 
    margin-top: 7%; 
    } 

    .navbar li a { 
    color:#000000; 
    font-size: 15px; 
    } 
    .navbar li a:focus, .navbar li a:hover{ 
    -webkit-transition:1s; 
    } 
    .logo{ 
    display:inline-block; 
    position: absolute; 
    left:40%; 
    font-size: 20px; 

    font: 80px "munich", Sans-serf, Ariel; 
    margin: 20px; 
    } 

    .logo a:focus, .logo a:hover{ 
    -webkit-transition:1s; 
    color:#999999; 
    text-decoration: none; 
    } 
    .logo li a:focus, .logo li a:hover{ 
    -webkit-transition:1s; 
    color:#000000; 
    } 

Answer 1

該按鈕顯示它只是不可見，將navbar-default類添加到您的導航元素。

對於下拉單擊時工作，您還需要包括bootstrap.js文件，它需要jquery我已經將它包含在示例中，以便您可以看到它在運行。

Example

代碼：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 

而且我發現您的標誌是，你需要把它顯示正確

像這樣的導航之外：

<div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Project name</a> 
</div>