我一直在研究 MVC 网络应用程序。到目前为止,一切工作都很好,希望有一件事情。基本上,我的问题是,当站点具有一定大小时,尝试并成功使我的navbar
的切换按钮消失时,我的navbar
不再响应,因为它不再适应其大小到屏幕。
这是我的整个button
和navbar
代码:
这是我的环境:
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
until here
<div class="navbar-header navbarnone">
<button type="button" class="navbar-toggler-icon navbarbutton" 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>
<div class="navbar-collapse collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" asp-controller="X" asp-action="Index">X</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-controller="x" asp-action="Index">x</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-controller="X" asp-action="Privacy">x</a>
</li>
<partial name="_LoginPartial" />
</ul>
</div>
这里是mediaquery
的CSS代码:
@media screen and (min-width: 768px) {
.navbarnone {
display: none;
}
}
答案 0 :(得分:0)
由于其他人可能也有同样的问题,我将发布自己找到的答案:
代码中缺少一行。元线。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
由于某种原因,此元标记会阻止Google Chrome浏览器破坏其开发工具。