引導程序崩潰導航欄不工作在自定義WordPress主題

Question

我看了大量的例子，並做了研究，我很卡住。

我正在構建一個使用html5空白和引導CDN的自定義WordPress主題。我試圖在響應大小中摺疊我的導航。我能夠讓它崩潰並創建按鈕，但我無法讓它暴露內容。

這是我的html和css。我錯過了什麼和/或做錯了什麼，我還能提供什麼幫助您更好地解答問題？

<header class="banner navbar navbar-static-top navbar-default header page-section clear" role="banner"> 
    <div class="wrapper clear"> 
     <div class="logo"> 
      <a href="<?php echo home_url(); ?>"> 
            <!-- svg logo - toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script --> 
     n<img src="<?php echo get_template_directory_uri(); ?>/img/mj-logo.png" alt="Logo" class="logo-img"> 
       </a> 
     </div> 
     <div class="navbar-header"> 
       <button type="button" style="background-color:black" 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> 
      </div> 
     <nav class="nav collapse navbar-collapse" role="navigation"> 
      <?php html5blank_nav(); ?> 
     </nav> 
    </div> 
</header> 


.wrapper { 
    max-width:1280px; 
    width:95%; 
    margin:0 auto; 
    position:relative; 
} 
/* header */ 
.header { 
    top:0; 
    left:0; 
    right:0; 
    position: fixed; 
    background:#fff; 
    z-index: 1; 
    height: 0px; 
    overflow:hidden; 
    display:block; 
    opacity: 0; 
    transition: all .32s ease-in-out; 
    -moz-transition: all .32s ease-in-out; 
    -webkit-transition: all .32s ease-in-out; 
} 
.header.active { 
    opacity:1; 
    height: 80px; 
} 
    .page-section { 
     width:100%; 
     height:100%; 
     margin:auto; 
    } 

JS鏈接的順序：

/wp-includes/js/jquery/jquery.js?ver=1.11.0 
/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2. 
/wp-content/themes/michaeljerome.com/js/scripts.js?ver=1.0.0 
https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js 

Answer 1

檢查，如果你提供的JavaScript，jQuery的JavaScript和引導的javascript

引導的javascript

的jQuery JavaScript的

這通常是沒有崩潰問題的問題。

jQuery的Javascript必須先走，然後引導js文件

///這是你的HTML標記

「> N/IMG/MJ-logo.png」 ALT = 「標誌」 類= 「標誌-IMG」> 切換導航

如果你想添加一個標誌或別的東西在你的頭放在不同的列

，最好不要混爲一談。

嘗試像

<header> 
<div class="container"> 
<div class="row"> 
<div class="col-md-4"> 
here goes whatever you want like your logo 
</div> 
<div class="col-md-8"> 
//here paste the navbar html code, not mixed with you header tag 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <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="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
</div> 
</div> 
</div> 
</header> 

如果上述方法無效，拿出你有任何的CSS，以檢查你的CSS中的一個壓倒一切的導航欄的CSS。