汉堡包和下拉菜单不能在移动设备上显示使用Bootstrap导航栏

我一直在这里搜索板子，没有任何东西可以掩盖什么可能是错的。我的导航栏一切都很好，但当我移动时，没有汉堡或菜单显示。我试过改变组合并实现不同的折叠名称，但无济于事。有任何想法吗？这里是我的代码：汉堡包和下拉菜单不能在移动设备上显示使用Bootstrap导航栏

 <header class="navbar navbar-custom" role="banner"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
    </div> 
    <nav class="collapse navbar-collapse" role="navigation"> 
      <ul class="nav navbar-nav pages"> 
       <li class="page"><a href="item1.html">item1</a></li> 
       <li class="page"><a href="item2.html">item2</a></li> 
       <li class="page"><a href="item3.html">item3</a></li> 
       <li class="page hidden-xs"><a href="item1.html"><img id="nav-brand" src="images/nav-logo1.png" width="120" alt="logo description"></a></li> 
       <li class="page"><a href="item4.html">item4</a></li> 
       <li class="page"><a href="item5.html">item5</a></li> 
       <li class="page"><a href="item6.html">item6</a></li> 
      </ul> 
     </div> 
    </div> 
</header>

来源

2016-09-22 SealHead1

控制台中的任何错误？你有没有包含正确的文件？ – j08691

检查，如果你有meta标签在你的脑袋节

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

而且您的导航标记不ul元素后关闭。检查标签关闭

我觉得</div>的</ul>必须更换

来源

2016-09-22 20:19:01

在原代码后，有封闭的资产净值股利。当我为这个网站格式化时发生了这种情况。在原文中，它由一个导航标签关闭。我忘了包含标题集。在这里，他们是：

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Home</title> 
    <link rel='shortcut icon' href='images/favicon.ico' type='image/x-icon'/ > 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
     crossorigin="anonymous"> 
    <link rel="stylesheet" href="css/styles.css"> 
    <script src="js/main.js"></script> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
     crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
     integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet"> 
    <script src="https://use.fontawesome.com/8633c13aa3.js"></script> 
</head>

来源

2016-09-22 20:37:01 SealHead1

你应该检查水平滚动当u减少screen.that是原因之一，当在没有充分响应您的内容和当u最小化水平滚动出现在屏幕和汉堡包图标不会出现...

首先删除所有内容，期望您的网页上的导航，然后尽量减少屏幕。如果问题仍然存在，那么你也应该检查你的背景颜色和颜色是否改变。

来源

2016-09-22 20:46:03

我试过了。你能解释一下你对背景颜色变化的意思吗？ – SealHead1

汉堡包和下拉菜单不能在移动设备上显示使用Bootstrap导航栏

回答

相关问题