Question

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

我检查过几个帖子，例如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>

由于

Answer 1

您忘记包含显示可折叠导航栏菜单的代码：

取代：

<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>

导航按钮未显示在移动设备上

1 个答案: