当网页缩小时,导航菜单自动隐藏,在静态网页能实现,在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>
应该设置一下在最小宽度多少的时候这个导航就隐藏否则不隐藏~我觉得得设置一个最小宽度 吧