Navbar沒有顯示和在移動上工作

我有一個帶導航欄按鈕和下拉菜單的網站，但是當我在移動設備或更小的設備上測試它時，我看不到導航欄，沒有按鈕不能按下，也沒有關於導航欄。我檢查了多次，如果我缺少標籤，但看不到任何東西丟失。Navbar沒有顯示和在移動上工作

我的導航欄的腳本：

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Sample</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/scripts.js"></script> 
    </head> 

    <body background="images/bg.jpg"> 
    <nav class="navbar navbar-light" style="background:whitesmoke" role="navigation"> 
     <div class="navbar-header"> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     </div> 
     <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">About Us</a></li> 
      <li class="active"><a href="#">Issuances</a></li> 
      <li> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Masterlist of School <strong class="caret"></strong></a> 
      <ul class="dropdown-menu multi-level"> 
       <li class="dropdown-submenu"> 
       <a href="#">Masterlist<br> S.Y. 2016-2017</a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Public School</a></li> 
        <li><a href="#">Public 2 School</a></li> 
       </ul> 
      </ul> 
      </li> 
      <li> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Others <strong class="caret"></strong></a> 
      </li> 
      <li class="active"> <a href="#" data-toggle="modal" data-target="#login-modal">Login</a></li> 
      <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
       <div class="modal-dialog"> 
       <div class="loginmodal-container"> 
        <h1>Login</h1> 
        <br> 
        <?php if(isset($error_msg)){ echo $error_msg; } ?> 
        <form action="" method="post" name="login"> 
         <input type="text" name="username" placeholder="Username" required> 
         <input type="password" name="password" placeholder="Password" required> 
         <input type="submit" name="submit" class="login loginmodal-submit" value="Login"> 
        </form> 
       </div> 
       </div> 
      </div> 
     </ul> 
     </div> 
    </body> 
</html>

來源

2017-05-23 Apple John

你的CSS在哪裏，請做一個片段。 – codesayan

@imSayan my css包含https://pastebin.com/tdJ81ygD –

我看你的HTML是不正確的。對於移動視圖，使用按鈕和navbar-toggle類，它應具有data-toggle屬性和指定導航條鏈接容器的ID的數據目標屬性。

在你的例子中，你應該使用這樣的東西。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1""> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span>       
</button>

我已經對代碼做了很少的更改以使其工作。檢查附在這裏的片段。

<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Sample</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <style> 
 
    .thumbnail { 
 
     background: whitesmoke; 
 
    } 
 
    
 
    a:hover { 
 
     color: black; 
 
    } 
 
    
 
    .navbar-nav>li>.dropdown-menu { 
 
     background-color: whitesmoke; 
 
    } 
 
    
 
    .navbar-nav>li>.dropdown-menu a { 
 
     color: black; 
 
    } 
 
    
 
    .dropdown-submenu { 
 
     position: relative; 
 
    } 
 
    
 
    .dropdown-submenu>.dropdown-menu { 
 
     top: 0; 
 
     left: 100%; 
 
     margin-top: -6px; 
 
     margin-left: -1px; 
 
     background-color: whitesmoke; 
 
     -webkit-border-radius: 0 6px 6px 6px; 
 
     -moz-border-radius: 0 6px 6px; 
 
     border-radius: 0 6px 6px 6px; 
 
    } 
 
    
 
    .dropdown-submenu:hover>.dropdown-menu { 
 
     display: block; 
 
    } 
 
    
 
    .dropdown-submenu>a:after { 
 
     display: block; 
 
     content: " "; 
 
     float: right; 
 
     width: 0; 
 
     height: 0; 
 
     border-color: transparent; 
 
     border-style: solid; 
 
     border-width: 5px 0 5px 5px; 
 
     border-left-color: black; 
 
     margin-top: 5px; 
 
     margin-right: -10px; 
 
    } 
 
    
 
    .dropdown-submenu:hover>a:after { 
 
     border-left-color: #fff; 
 
    } 
 
    
 
    .dropdown-submenu.pull-left { 
 
     float: none; 
 
    } 
 
    
 
    .dropdown-submenu.pull-left>.dropdown-menu { 
 
     left: -100%; 
 
     margin-left: 10px; 
 
     -webkit-border-radius: 6px 0 6px 6px; 
 
     -moz-border-radius: 6px 0 6px 6px; 
 
     border-radius: 6px 0 6px 6px; 
 
    } 
 
    
 
    button.navbar-toggle { 
 
     border: 2px solid #ddd; 
 
    } 
 
    
 
    .navbar-toggle .icon-bar { 
 
     background-color: #333; 
 
    } 
 
    </style> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</head> 
 

 
<body background="images/bg.jpg"> 
 
    <nav class="navbar navbar-light" style="background:whitesmoke" role="navigation"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" "> 
 
\t \t \t \t <span class="icon-bar "></span> 
 
\t \t \t \t <span class="icon-bar "></span> 
 
\t \t \t \t <span class="icon-bar "></span>       
 
\t \t  </button> 
 
     <a class="navbar-brand " href="# ">WebSiteName</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1 "> 
 
     <ul class="nav navbar-nav "> 
 
      <li class="active "><a href="# ">About Us</a></li> 
 
      <li class="active "><a href="# ">Issuances</a></li> 
 
      <li> 
 
      <a href="# " class="dropdown-toggle " data-toggle="dropdown ">Masterlist of School <strong class="caret "></strong></a> 
 
      <ul class="dropdown-menu multi-level "> 
 
       <li class="dropdown-submenu "> 
 
       <a href="# ">Masterlist<br> S.Y. 2016-2017</a> 
 
       <ul class="dropdown-menu "> 
 
        <li><a href="# ">Public School</a></li> 
 
        <li><a href="# ">Public 2 School</a></li> 
 
       </ul> 
 
      </ul> 
 
      </li> 
 
      <li> 
 
       <a href="# " class="dropdown-toggle " data-toggle="dropdown ">Others <strong class="caret "></strong></a> 
 
      </li> 
 
      <li class="active "> <a href="# " data-toggle="modal " data-target="#login-modal ">Login</a></li> 
 
      <div class="modal fade " id="login-modal " tabindex="-1 " role="dialog " aria-labelledby="myModalLabel " aria-hidden="true " style="display: none; "> 
 
       <div class="modal-dialog "> 
 
       <div class="loginmodal-container "> 
 
        <h1>Login</h1> 
 
        <br> 
 
        <?php if(isset($error_msg)){ echo $error_msg; } ?> 
 
        <form action=" " method="post " name="login "> 
 
         <input type="text " name="username " placeholder="Username " required> 
 
         <input type="password " name="password " placeholder="Password " required> 
 
         <input type="submit " name="submit " class="login loginmodal-submit " value="Login "> 
 
        </form> 
 
       </div> 
 
       </div> 
 
      </div> 
 
     </ul> 
 
     </div> 
 
\t </div> 
 
\t </nav> 
 
     
 
    </body>

我添加了一個邊框樣式導航欄，切換按鈕，使其顯示在屏幕上。

這是不工作因爲某些未知的原因，只是嘗試粘貼代碼並在瀏覽器中運行它。它應該按預期工作。

來源

2017-05-23 08:29:15

Navbar沒有顯示和在移動上工作

回答

相關問題