javascript - Bootstrap 简单导航栏在我的页面中不起作用

标签 javascript jquery html css twitter-bootstrap

我的页面中有一个简单的 Bootstrap 导航栏，但它不起作用。 JavaScript 和 CSS 文件工作正常。我查了一下。当我从 <nav> 复制导航代码时至</nav>并将其粘贴到一个新文件中，然后它工作正常，但在我的实际文件中不起作用。看起来像 This 我期待类似 This 的东西

我的页面源代码在这里......

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Information Panel for Students</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="../include/css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="../include/css/footer.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">

<!--    header start from here -->

    <header>
      <nav class="navbar navbar-default">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="index.php" class="navbar-brand">Department Dashboard</a>
        </div>
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.php">Home</a></li>
            <li><a href="update_password.php">Update Password</a></li>
            </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="logout.php">Logout</a></li>
            </ul>
        </div>
        </nav>
  </header>

    <h3>Teachers:</h3>
  <div class="row">
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512541379-5412-5a278cc30963e-NOKIA_RM-1030_206834512-206835569_000.JPG" width="180" height="220"/><br>Person Name : Shaida Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512541601-6654-5a278da1bf564-NOKIA_X2-02_215986488-215987862_000.JPG" width="180" height="220"/><br>Person Name : Nausheen Fayaz<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512541663-4311-5a278ddfa5374-NOKIA_X2-02_215461832-215462529_000.JPG" width="180" height="220"/><br>Person Name : Javed Chaudry<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512541718-9653-5a278e1617035-NOKIA_RM-1030_206827192-206828288_000.JPG" width="180" height="220"/><br>Person Name : Khan Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512563517-6727-5a27e33d9dc39-NOKIA_E5-00_202194584-202196971_000.JPG" width="180" height="220"/><br>Person Name : Farsil Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512563572-2715-5a27e374a3c1d-NOKIA_RM-1030_202261216-202265107_000.JPG" width="180" height="220"/><br>Person Name : Ek Aur Teacher Ke Data<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512216690-8783-5a229872e2564-NOKIA_5233_244851632-244851959_000.JPG" width="180" height="220"/><br>Person Name : Azhar Rauf<br>Current Place : Class Room<br>Status Date : 02-12-2017<br>Status Time : 05:15:21 PM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512217027-6925-5a2299c3d363f-NOKIA_E5-00_202038176-202041197_000.JPG" width="180" height="220"/><br>Person Name : Fatima Zuhra<br>Current Place : Class Room<br>Status Date : 02-12-2017<br>Status Time : 05:19:28 PM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512217504-2845-5a229ba0c8635-NOKIA_E5-00_202201816-202204433_000.JPG" width="180" height="220"/><br>Person Name : Khan Lala<br>Current Place : Class Room<br>Status Date : 02-12-2017<br>Status Time : 05:33:17 PM<br><br></div>  </div>


    <h3>Chairman:</h3>
    <div class="row">
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../chairman/images/resized_1512141619-1363-5a2173335d788-NOKIA_5233_244851632-244851959_000.JPG" width="180" height="220"/><br>Person Name : Shah Khusro<br>Current Place : Chairman Office<br>Status Date : 01-12-2017<br>Status Time : 08:26:40 PM<br><br></div>    </div>

    <h3>Clerks:</h3>
    <div class="row">
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512562768-5527-5a27e0506acd1-HUAWEI_HUAWEI_611272384-611272979_000.JPG" width="180" height="220"/><br>Person Name : Demo Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512562854-8274-5a27e0a675bb8-HUAWEI_CHM-U01_183017224-183021314_000.JPG" width="180" height="220"/><br>Person Name : Galaxy Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512563316-1142-5a27e2744dc95-NOKIA_5233_244851632-244851959_000.JPG" width="180" height="220"/><br>Person Name : Asdf Adf<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512563366-8649-5a27e2a6bb78c-NOKIA_E5-00_202083984-202086713_000.JPG" width="180" height="220"/><br>Person Name : Sdfasd Adfdsf<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512563389-3596-5a27e2bdc3ff7-NOKIA_E5-00_202186392-202189391_000.JPG" width="180" height="220"/><br>Person Name : Sdf Fsd<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512563480-2752-5a27e3185f05f-NOKIA_RM-1030_194996488-194998710_000.JPG" width="180" height="220"/><br>Person Name : Dfasdf Sdalfksd<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512145551-9397-5a21828fc4953-NOKIA_E5-00_202038176-202041197_000.JPG" width="180" height="220"/><br>Person Name : Faris Khan<br>Current Place : Clerk Office<br>Status Date : 02-12-2017<br>Status Time : 09:46:40 AM<br><br></div>    </div>

    <h3>Lab Staff:</h3>
    <div class="row">
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../lab_staff/images/resized_1512218344-7079-5a229ee8b9e5a-NOKIA_RM-1030_206846160-206847834_000.JPG" width="180" height="220"/><br>Person Name : Samin Jan<br>Current Place : Laboratory<br>Status Date : 02-12-2017<br>Status Time : 05:39:47 PM<br><br></div>    </div>

    <h3>PN Staff:</h3>
    <div class="row">
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../pn/images/resized_1512145738-2830-5a21834a6d1d7-NOKIA_E5-00_202048056-202051887_000.JPG" width="180" height="220"/><br>Person Name : Penis Khan<br>Current Place : Outside<br>Status Date : 02-12-2017<br>Status Time : 06:09:47 PM<br><br></div>    </div>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <div class="footer-block">
                        <ul class="list-inline footer-menu">
                            <li><a href="">Term of Use</a></li>
                            <li><a href="">Privacy Policy</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-4">
                  <div class="footer-block text-center">
                    <p class="copyright">
                        © 2018 Department Dashboard.<br>
                        All rights reserved.<br>
                        Developed By:<br>
                        Shaida Muhammad Sherpao
                      </p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="footer-block">
                        <ul class="list-inline pull-right social-icon">
                            <li><a href="https://facebook.com/sh3rpao"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="https://twitter.com/shaidasherpao"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="https://pk.linkedin.com/in/shaida-muhammad-sherpao-a3388a103"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>  
<script src="../include/js/jquery-1.11.3.min.js"></script>
<script src="../include/js/bootstrap.js"></script>
</body>
</html>

最佳答案

如果我没记错的话，您正在使用 Bootstrap 3。

在 getBootstrap 中有关于 Navbar 组件的详细文档: https://getbootstrap.com/docs/3.3/components/#navbar

我没有在您的代码中看到错误。如果您有其他 CSS 文件，可以也分享一下吗？

关于javascript - Bootstrap 简单导航栏在我的页面中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47692594/

上一篇：javascript - 未能声明接口(interface) 0 : Device or resource busy

下一篇：javascript - Google Invisible reCAPTCHA 破坏 Firefox JavaScript

相关文章：

jquery - 以编程方式设置 <select> 的值时，不会调用 Change 事件

javascript - 将富消息集成到 Dialogflow 实现中

javascript - 为什么这个 for 循环不能正确读取传递的参数中的 this ？

javascript - 检查 2 个输入字段和一个选择字段，以便在全部填写完毕后进行更改

jquery - 使用 jQuery 滚动顶部 +10

javascript - jQuery 合并/过滤器选择器

html - 选择和选项样式

javascript - POST 字段被 Chrome chop

javascript - jQuery:根据if语句添加css

html - 如何定位具有特定 css 属性的元素(仅 CSS 解决方案)？

©2024 IT工具网  联系我们