我的页面中有一个简单的bootstrap导航栏，但它不起作用。JavaScript和CSS文件正常工作。我检查了。当我将导航代码从<nav>复制到</nav>并将其放在新文件中时，它可以正常工作，但在我的实际文件中不起作用。看起来像这样我期待像这样的东西
我的页面源代码在这里.....
<!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>
如果我没记错的话，您正在使用bootstrap3。
getbootstrap中有一个有关纳维尔组件的详细文档：https://getbootstrap.com/docs/3.3/components/#navbar
我没有看到您的代码中的错误。如果您有另一个CSS文件，您也可以分享它们吗？
也许是CSS。在头部，写这个
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
而不是导入.css文件
edit
写这本书而不是写的
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
您的代码正常工作。尝试此
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Information Panel for Students</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</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>
</body>
</html>