堆棧內存溢出
  簡體   English   中英

Bootstrap簡單導航欄在我的頁面中不起作用

[英]Bootstrap Simple Navigation bar not working in my page

 原文  2017-12-07 10:12:59  2   3    javascript/ jquery/ html/ css/ twitter-bootstrap

問題描述

我的頁面上有一個簡單的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>

3 個解決方案

解決方案1
 0  2017-12-07 10:19:35

也許是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文件

編輯

寫這個而不是你寫的 

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

解決方案2
 0  2017-12-07 10:24:02

如果我沒記錯的話，您正在使用Bootstrap 3。

在getBootstrap中有有關Navbar組件的詳細文檔： https ://getbootstrap.com/docs/3.3/components/#navbar

我沒有在您的代碼中看到錯誤。 如果您還有另一個CSS文件，也可以分享一下嗎？

解決方案3
 0  2017-12-07 10:55:23

您的代碼運行良好。 

 <!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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 我的導航欄無法點擊 Bootstrap在簡單的HTML頁面上不起作用 調整頁面大小時浮動導航欄不起作用 我的自舉輪播指標與固定的頂部導航欄重疊 如何使用引導輪播最大化或填充整個頁面。 （帶有導航欄） 使用Bootstrap進行頁面導航 響應式導航欄不起作用 粘性導航欄-不起作用 使用 json 的 Bootstrap 4 導航欄 引導導航欄自動完成問題
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM