Bootstrap Navbar-Collapse无法正常工作
[英]Bootstrap Navbar-Collapse Not Working
问题描述
我在将可折叠导航栏加载到页面时遇到问题 - 缩小屏幕时会出现按钮，但是当我点击它时，没有任何反应。 请帮忙。
以下是我的HTML：
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <title>@ViewBag.Title - OTANI TIRE CO., LTD.</title> <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery")"></script> <script src="@Url.Content("~/Scripts/bootstrap")"></script> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <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> <ul class="nav navbar-nav"> <li> <a href="@Url.Action("Index", "Home")" title="Index" class="links"> <img alt="Index" src="@Url.Content("~/Content/Logo-Otani-3D_H2.png")"> </a> </li> </ul> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("New Arrivals", "NewArrivals", "Home")</li> <li>@Html.ActionLink("Brochure", "Brochure1", "Home")</li> <li>@Html.ActionLink("Awards", "Awards", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> </div> </div> </div> <div class="container body-content"> @RenderBody() <br> <br> <br> <br> <hr /> <footer> <p>© @DateTime.Now.Year - OTANI TIRE CO., LTD. - ALL RIGHTS RESERVED.</p> </footer> </div> <script src="Scripts/jquery-1.10.2.js"></script> <script src="Scripts/bootstrap.js"></script> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2016-03-15 08:46:47
首先，将类别navbar-brand添加到徽标中。 它的跨度阻止了下拉按钮
<a href="@Url.Action("Index", "Home")" title="Index" class="links navbar-brand">
<img alt="Index" src="@Url.Content("~/Content/Logo-Otani-3D_H2.png")">
</a>
并确保您的Javascript文件已加载
如何将活动类添加到当前 <li> 引导崩溃内导航栏崩溃？
[英]How can I add the active class to to the current <li> within bootstrap collapse navbar-collapse?
Jasny-Bootstrap显示菜单中断了导航栏折叠和导航栏切换功能
[英]Jasny-Bootstrap reveal menu breaks navbar-collapse and navbar-toggle functionality
单击带有轮播的切换按钮后，bootstrap导航栏崩溃消失
[英]Bootstrap navbar-collapse disappear after I click the toggle button with carousel
切换按钮折叠在引导程序中的Bootstrap导航栏中不起作用
[英]Toggle button collapse not working in Bootstrap navbar in bootstrap
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.