引导程序崩溃导航栏不工作在自定义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。