【问题标题】:Bootstrap 3.3.7 navbar collapse doesn't workBootstrap 3.3.7 导航栏折叠不起作用
【发布时间】:2017-10-23 00:55:51
【问题描述】:

我是 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>

【问题讨论】:

  • 您使用的是哪个 bootstrap-rtl 库?是这个吗morteza bootstrap-rtl
  • bootstrap rtl by Mahdi Gherekhloo v3.3.5.2

标签: html twitter-bootstrap toggle collapse


【解决方案1】:

您的折叠 ID 被分割,所以这就是为什么不起作用。 它看起来像这样:

id="navbar-collapse-
  zagros">

如果你这样使用它:

id="navbar-collapse-zagros">

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

【讨论】:

  • 感谢您的回复,但是当我使用其他 css 和 jquery 时,我的方向有问题。我希望它是 rtl
猜你喜欢
  • 2015-11-14
  • 2021-10-19
  • 2013-08-10
  • 1970-01-01
  • 2015-07-01
  • 2021-11-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多