Question

我是bootstrap中的新手并尝试切换导航栏，但按钮根本不起作用。我尝试了几个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>

Answer 1

您的崩溃ID是分开的，因此无法正常工作。看起来像这样：

id="navbar-collapse-
  zagros">

如果您使用它：

id="navbar-collapse-zagros">

它会起作用。您也可以查看它：https://codepen.io/betuluzun/pen/vmvVJN

Bootstrap 3.3.7导航栏崩溃不起作用

1 个答案: