css - Bootstrap 折叠导航在自定义 wordpress 主题中不起作用

Question

我查看了大量示例并进行了研究，但仍然很困惑。

我正在使用 html5 空白和 Bootstrap 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 和 bootstrap javascript

Bootstrap

jquery javascript

这通常是不折叠问题的问题。

jquery javascript 必须先行，然后是 bootstrap js 文件

///这是你的 html 标记

"> n/img/mj-logo.png"alt="标识"class="标识-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。