引導導航欄不顯示正確

我是新來的StackOverflow的社區，並希望在未來:-)現在貢獻我自己的解決方案，您的幫助將不勝感激：引導導航欄不顯示正確

這是一個WordPress的部分腳本頁面使用Bootstrap（只有導航欄部分完成）。出於某種原因，它在任何瀏覽器上都無法正常顯示，除了在Internet Explorer上。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> 
<meta charset="utf-8"> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<meta name="Description" content=""> 
<meta name="Author" content=""> 
<link rel="icon" href="assets/img/favicon.ico"> 

    <title>Test</title> 

    <!-- Bootstrap core CSS EDITED--> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 

    <!-- FontAwsome icons --> 
    <link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 

    <!-- google fonts --> 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> 

    <!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 

    </head> 
<body> 

<!-- HEADER ======== --> 
    <header class="site-header" role="banner"> 

     <!-- Navbar --> 
     <div class="navbar-wrapper"> 
     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 

      <div class="container"> 

       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <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 src="assets/img/logo.png" alt="Boostrap to Wordpress"></a> 

       </div><!--navbar header --> 
       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="active"><a href="/">Home</li> 
         <li><a href="blog.html">Blog</li> 
         <li><a href="resources.html">Resources</li> 
         <li><a href="Contact.html">Contact</li> 
        </ul><!-- nav 

       <div><!--navbar collapse --> 

     </div><!-- container --> 
    </div><!-- navbar --> 
</div><!--navbar wrapper --> 

    </header> 

    <!-- Section1 ======== --> 
    <section> 
    </section> 

    <!-- sections missing ... --> 

    <!-- FOOTER ======== --> 

    <footer> 
    </footer> 

    <!-- BOOSTRAP CORE JAVASCRIPT =====EDITED --> 
    <script assets/js/jquery-2.1.4.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

</body> 
</html>

我很確定CSS和JS腳本是最新的。

來源

2015-06-17 Twynn

你有包括'jquery.2.1.4.js'兩次..刪除一個鏈接！ –

檢查控制檯窗口中的錯誤。我相信bootstrap沒有正確加載 –

謝謝大家！ – Twynn

正確包含引導文件，並檢查它是否已被加載，並轉移到jquery.js多個參考，並防止任何一個無論是從cdn - https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js或從當地 - assets/js/jquery-2.1.4.min.js

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> 
 
<meta charset="utf-8"> 
 

 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
<meta name="Description" content=""> 
 
<meta name="Author" content=""> 
 
<link rel="icon" href="assets/img/favicon.ico"> 
 

 
    <title>Test</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    
 

 
    <!-- FontAwsome icons --> 
 
    <link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
 

 
    <!-- google fonts --> 
 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> 
 

 
    <!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries --> 
 
\t <!--[if lt IE 9]> 
 
\t <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
\t <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
\t <![endif]--> 
 

 
    </head> 
 
<body> 
 

 
<!-- HEADER ======== --> 
 
    <header class="site-header" role="banner"> 
 
     
 
\t <!-- Navbar --> 
 
\t <div class="navbar-wrapper"> 
 
     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 

 
      <div class="container"> 
 

 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
\t \t \t \t  <span class="sr-only">Toggle navigation</span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
        </button> 
 
\t \t \t \t \t <a class="navbar-brand" href="/"><img src="assets/img/logo.png" alt="Boostrap to Wordpress"></a> 
 

 
\t \t \t \t </div><!--navbar header --> 
 
       <div class="navbar-collapse collapse"> 
 
        <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t \t <li class="active"><a href="/">Home</li> 
 
\t \t \t \t \t <li><a href="blog.html">Blog</li> 
 
         <li><a href="resources.html">Resources</li> 
 
         <li><a href="Contact.html">Contact</li> 
 
\t \t \t \t \t </ul><!-- nav 
 

 
       <div><!--navbar collapse --> 
 

 
    \t \t \t </div><!-- container --> 
 
\t </div><!-- navbar --> 
 
</div><!--navbar wrapper --> 
 

 
    </header> 
 

 
    <!-- Section1 ======== --> 
 
    <section> 
 
    </section> 
 

 
\t <!-- sections missing ... --> 
 

 
\t <!-- FOOTER ======== --> 
 

 
    <footer> 
 
    </footer> 
 

 
    <!-- BOOSTRAP CORE JAVASCRIPT ======== Place at the end of the document so the pages load faster --> 
 
    
 
    
 

 
</body> 
 
</html>

來源

2015-06-17 08:25:43

引導導航欄不顯示正確

回答

相關問題