Bootstrap 3.3.7導航欄折疊不起作用
[英]Bootstrap 3.3.7 navbar collapse doesn't work
問題描述
我是引導程序的新手，正在嘗試切換導航欄，但該按鈕根本不起作用。 我嘗試了幾種jQuery版本，但無濟於事。 我感到很困惑。 另外，我正在使用bootstrap.rtl。
這是我的代碼：
<head runat="server">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-rtl.min.css" rel="stylesheet" />
<link href="Content/main.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-rtl.min.js"></script>
</head>
<nav class="navbar navbar-inverse" style="background-color:
#330033">
<div class="container-fluid" style="padding-right: 0px">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar-collapse-zagros" aria-
controls="zagros">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%--<a class="navbar-brand" style="padding-left:8px"
href="#">زاگرس تیکتینگ</a>--%>
<div style="background-image: url('Images/logo-
zagros.png'); background-repeat: no-repeat; width: 124px; height: 70px;">
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-
zagros">
<ul class="nav navbar-nav ">
<li class="active "><a class="text-center" href="#">
<i class="glyphicon glyphicon-dashboard white"></i>
<br />
داشبورد</a></li>
<li><a class="text-center" href="#"><i
class="glyphicon glyphicon-th-large white"></i><br />بخش ها</a></li>
<li><a href="#" class="text-center"><i
class="glyphicon glyphicon-th white"></i><br />کاربران</a></li>
<li><a href="#" class="text-center"><i
class="glyphicon glyphicon-file white"></i><br />تیکت</a></li>
<li><a href="#" class="text-center"><i
class="glyphicon glyphicon-cog white"></i><br />تنظیمات</a></li>
<li class="dropdown"><a class="dropdown-toggle text-
center" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-
education white"></i><br />پایگاه اطلاعات<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li><a id="exit" href="#" class="text-center"><i
id="exitIcon" class="glyphicon glyphicon-off white"></i><br />خروج</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li><a href="#" class="text-center" style="padding-
top:23px"><i class="glyphicon glyphicon-log-in white" style="padding-
left: 5px;"></i>ورود</a></li>
<li><a href="#" class="text-center" style="padding-
top:23px"><i class="glyphicon glyphicon-user white" style="padding-
left: 5px;"></i>ثبت نام</a></li>
</ul>
</div>
</div>
</nav>
1 個解決方案
解決方案1
0 2017-05-23 08:08:31
您的收合編號被划分了，所以這不起作用。 看起來像這樣：
id="navbar-collapse-
zagros">
如果您將其用於：
id="navbar-collapse-zagros">
它會工作。 您也可以檢查它： https : //codepen.io/betuluzun/pen/vmvVJN
bootstrap 4 導航欄折疊不起作用（使用 JQuery - popper - bootstrap
[英]bootstrap 4 navbar collapse doesn't work (with JQuery - popper - bootstrap
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.