Navbar崩潰在Bootstrap中不起作用

@Bhanu pratap解決了這個問題。在這個問題結束時檢查它。Navbar崩潰在Bootstrap中不起作用

我一直在關注一箇舊的課程來建立一個導航欄崩潰（三明治）。問題是，課程中的頁面頂部出現一個黑條，當縮小頁面時出現導航欄。對我來說，我只是在左邊看到一個按鈕。另外，當我縮小頁面時，我沒有看到導航欄。

這裏是源代碼：

<!DOCTYPE html> 
<html lang="arabic"> 
    <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" herf="assets/img/favicon.ico"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="assets/js/jquery-3.1.1.min.js"></script> 
    <script src="assets/js/main.js"></script> 

    <!-- Bootstrap core CSS --> 
    <link href="assets/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Font-Awesome icons--> 
    <link href="assets/css/font-awesome/css/font-awesome.min.css"> 

    <!-- Google Fonts LATEEF --> 
    <link href="https://fonts.googleapis.com/css?family=Changa:400,600&amp;subset=arabic,latin-ext" rel="stylesheet"> 

    <title>Bootstrap to Wordpress</title> 




     <!-- 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="https://oss.maxcdn.com/html5shiv/3.7.3/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" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a> 
         </div><!-- navbar-header --> 
         <div class="navbar-collapse collapse"> 

         </div><!-- collapse nav--> 
        </div><!-- container --> 

      </div><!-- navbar --> 


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


    </header> 

    <!-- FOOTER TAG --> 
    <footer> 

    </footer> 

    <!-- MODAL --> 
    <div> 

    </div> 

    <!-- BOOTSTRAP CORE JAVASCRIPT 
      PLACED AT THE END OF THE DOCUMENT SO THE PAGES 
      LOAD FASTER! 
    ================================================== --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="assets/js/jquery-3.1.1.min.js"></script> 
    <script src="assets/js/main.js"></script> 

    <!-- Type google font --> 
    <script src="https://use.typekit.net/byz5vqz.js"></script> 
    <script>try{Typekit.load({ async: true });}catch(e){}</script> 

    </body> 
</html>

我試着用另一種源代碼來改變這一部分，但問題再次出現。

UPDATE： @Bhanu普拉塔普解決了插件UL和李的propblem，顯示明顯的影響。這裏是他的源代碼：

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 


<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 collapsed" 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" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a> 
       </div><!-- navbar-header --> 
       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li> 
          <a href="">First Menu Item</a> 
         </li> 
         <li> 
          <a href="">Second Menu Item</a> 
         </li> 
         <li> 
          <a href="">Third Menu Item</a> 
         </li> 
        </ul> 
       </div><!-- collapse nav--> 
      </div><!-- container --> 

     </div><!-- navbar --> 
    </div>

來源

2016-11-27 Who knows

您使用jQuery 3.1和引導需要jQuery的2歲或以下。嘗試使用jquery的早期版本 –

我已經將其更改爲jquery 2，但我仍然遇到同樣的問題。 –

試試這個..我剛添加了UL和李在你的代碼，以顯示你可以使用你的代碼段有明顯的效果..

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<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 collapsed" 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" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a> 
 
       </div><!-- navbar-header --> 
 
       <div class="navbar-collapse collapse"> 
 
        <ul class="nav navbar-nav"> 
 
         <li> 
 
          <a href="">First Menu Item</a> 
 
         </li> 
 
         <li> 
 
          <a href="">Second Menu Item</a> 
 
         </li> 
 
         <li> 
 
          <a href="">Third Menu Item</a> 
 
         </li> 
 
        </ul> 
 
       </div><!-- collapse nav--> 
 
      </div><!-- container --> 
 

 
     </div><!-- navbar --> 
 
    </div>

來源

2016-11-27 18:26:29

$(document).on('click','.navbar-collapse.in',function(e) { 
    if($(e.target).is('a') && ($(e.target).attr('class') != 'dropdown-toggle')) { 
    $(this).collapse('hide'); 
} }); 

$("button.navbar-toggle").click(function (e) { 
    $("#main-navbar").collapse('hide'); 
    $("#main-navbar").removeClass("in"); });

來源

2016-12-21 16:59:21 pabloRN

Navbar崩潰在Bootstrap中不起作用

回答

相關問題