Сбой 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>

Я пытался изменить эту часть с другим исходным кодом, но проблема возникает снова.

ОБНОВЛЕНИЕ: @Bhanu Pratap решена путем propblem Addin ул и Ли, чтобы показать видимые эффекты. вот его исходный код:

<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, и я все еще получаю ту же проблему. –

Попробуйте это .. я только что добавили ул и Ли в свой код, чтобы показать видимый эффект, который вы можете использовать ваш код раздела там ..

<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

ответ

Смежные вопросы