当网页缩小时,导航菜单自动隐藏,在静态网页能实现,在VS项目中不起作用?只有点击2次黑色按钮,才会隐藏,我想第一次缩小网页(显示在手机端时),导航菜单自动隐藏,请问是什么原因?应该怎样解决?
供参考:
<html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>数据服务平台</title> <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" /> <script src="/bootstrap/js/jquery-2.0.3.min.js"></script> <script src="/bootstrap/js/cookie.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> <style> body{padding-top: 0px;} .starter {padding: 40px 15px; text-align: center;} .nav > li .dropdown-menu { margin: 0; border-radius: 0px; background: #212121; border-color: #212121; } .nav > li:hover .dropdown-menu { display: block; } .dropdown-menu > li > a:hover { background: #08c; } .dropdown-menu li a{color: #fff;} </style> </head> <body> <nav class="navbar navbar-inverse nav-fixed-top" role="navigation" style=""> <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> <a href="" class="navbar-brand">数据服务平台</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 首页 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a id="sta123" href="">数据报表</a></li> </ul> </div> </div> </nav>
应该设置一下在最小宽度多少的时候这个导航就隐藏否则不隐藏~我觉得得设置一个最小宽度 吧