在移动设备上没有显示Navbar按钮

问题描述：

我有一个非常简单的页面，它由一个导航栏和一些按钮组成。但是，当我使用移动设备访问该页面时，这些按钮不显示。在移动设备上没有显示Navbar按钮

我检查了几个线程，如this和这个this，但我不明白我的问题在哪里。

代码：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Flask Template Example</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <style type="text/css"> 
     .container { 
     max-width: 1400px; 
     padding-top: 100px; 
     } 
     h2 {color: #55acee;} 
    </style> 
</head> 
<body> 
<nav class="navbar navbar-inverse" role="navigation"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="/">My API</a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li><a href="/Test">Test</a></li> 
      <li><a href="/endpoints">Endpoints</a></li> 
      <li><a href="/about">Information</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
    <div class="container"> 
     <!--<h2>This is part of my base template</h2>--> 
     <br> 

     <h2>Hello</h2> 

     <br> 
     <!--<h2>This is part of my base template</h2>--> 
    </div> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

感谢

答

你忘了包括代码，显示了可折叠导航栏菜单：

替换：

<div class="navbar-header"> 
    <a class="navbar-brand" href="/">My API</a> 
</div>

有：

<div class="navbar-header"> 
    <a class="navbar-brand" href="/">My API</a> 
     <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> 
     </button> 
</div>

这做的工作，非常感谢。 – user3276768

在移动设备上没有显示Navbar按钮

相关推荐