簡單的引導導航欄不會在手機上崩潰

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