简单的引导导航栏不会在手机上崩溃

Question

也许我缺少或不了解某些内容，但是，我尝试了所有可能的方法并得到了相同的结果。

我的问题

我已经把页面哑了，以至于我只是从w3schools那里以响应式导航栏为例。 当我调整浏览器窗口的大小时，导航栏会按原样折叠。 在我的JSFIDDLE中，导航栏应该折叠，但是，一旦我转到移动设备上，导航栏就不会崩溃 ...我在这里做错了什么？

浏览器大小

浏览器调整大小，应该正常工作！

移动设备

移动设备不工作，为什么？ 我在这里做错了什么？ 这是我的JSFIDDLE的链接

<head>
    <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" </script>
</head>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

您似乎在代码中缺少Viewport标签，请仔细检查您的代码并确保您拥有可用的Viewport标签，如果没有添加以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

将其调整为较小的宽度时，您的JSFiddle示例工作正常

Answer 2

试试这个：

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, manimum-scale=1.0, maximum-scale=1.0" />

简单的引导导航栏不会在手机上崩溃

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-03-14 04:30:09

解决方案2
0 2017-03-14 04:43:34

简单的引导导航栏不会在手机上崩溃

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-03-14 04:30:09

解决方案2 0 2017-03-14 04:43:34

解决方案1
3 已采纳 2017-03-14 04:30:09

解决方案2
0 2017-03-14 04:43:34