1. 首頁
  2. 問答
  3. 爲什麼引導撥動導航欄不顯示正確

爲什麼引導撥動導航欄不顯示正確

2017-04-26 132 views
-1

我在與引導撥動導航欄有問題的菜單鏈接。基本上我在幾個項目中使用過Bootstrap，但我沒有遇到這個問題，但現在我不知道爲什麼應該顯示在手機等小設備中的切換導航欄不包含正確的菜單鏈接...爲什麼引導撥動導航欄不顯示正確

以下是打印屏幕圖像，你可以更好地理解我在說：

print scree

正如你可以看到菜單1和連接2應該在顯示在一個白色盒子不圖片 ！！

所以，如果你知道如何解決這個問題，請讓我知道...在此先感謝。 下面是完整的代碼：

<!DOCTYPE html> 
<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>Parallax Demo Site</title> 
     <link rel="stylesheet" href="css/demo.css" type="text/css"/> 
     <link rel="stylesheet" href="styles.css" type="text/css"/> 
     <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' type='text/css'> 
     <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" type="text/css"/> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" type="text/javascript"></script> 
     <script src="js/jquery.stellar.js" type="text/javascript">></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">></script> 
     <script src="js/scrip.js" type="text/javascript">></script> 
     <script src="js/jquery.nicescroll.js" type="text/javascript">></script> 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
      <!--[if lt IE 9]> 
      <script src="js/html5shiv.min.js"></script> 
      <script src="js/respond.min.js"></script> 
     <![endif]--> 
    </head> 
    <body data-spy="scroll" data-target="#my-navbar"> 

     <nav class="navbar navbar-default navbar-fixed-top BKoodakBold"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
         <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" href="#"><img class="lg" src="images/logo.png" width="100%"></a> 
       </div> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="bx"> 
          <a href="#">Link1 &nbsp;<span class="glyphicon glyphicon-briefcase"></span></a> 
         </li> 
         <li class="dropdown bx"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link2 &nbsp;<span class="glyphicon glyphicon-user"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here</a></li> 
           <li role="separator" class="divider"></li> 
           <li><a href="#">Separated link</a></li> 
          </ul> 
        </ul> 
       </div> 
      </div> 
     </nav> 

     <div id="wall_1" class="image" data-stellar-background-ratio="0.4" >asdsa</div> 
     <div id="content_1" class="content"> 
      <h1>Heading</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 

     <div id="wall_2" class="image" data-stellar-background-ratio="0.4" ></div> 
     <div id="content_2" class="content" > 
      <h1>Heading</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 

     <div id="wall_3" class="image" data-stellar-background-ratio="0.4" ></div> 
     <div id="content_2" class="content"> 
      <h1>Heading</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 

     <script type="text/javascript"> 
      $(document).on('scroll',function(){ 
       if($(this).scrollTop() > 1){ 
        $('nav').addClass('sticky'); 
       }else{ 
        $('nav').removeClass('sticky'); 
       } 
      }); 
     </script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

來源

2017-04-26 KKK KKK

+1

請發佈代碼 – ZimSystem

+0

剛剛更新了頁面， –

+0

有沒有機會鏈接到此版本？我懷疑問題出在你的CSS中，而不是HTML。易於通過網站鏈接進行調試。 – Korgrue

回答

1

您可以添加

.navbar-nav > li > a { 
    background: #fff; 
    border: 1px solid #ccc; 
}

和也許還像

.navbar-nav > li > a:hover { 
    background: #eee; 
}

來源

2017-04-26 22:09:59 Johannes

相關問題

 相關問題