我的导航栏未显示在移动设备上

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>