Bootstrap 引导导航栏：折叠菜单在小分辨率下不展开

我正在创建一个博客网站，我的导航栏使用bootstrap。当我将屏幕缩小到移动的时，菜单项会按需要折叠，但是当我点击展开图标时，它没有React。下面是我的代码：

<nav class="navbar navbar-inverse">
 <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" aria-expanded="false">
    <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="/"><i class="fa fa-futbol-o" aria-hidden="true"></i>  NUFC Blog</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="#"><i class="fa fa-envelope-o" aria-hidden="true"></i>   Contact <span class="sr-only">(current)</span></a>. </li>
  </ul>
  <% if(currentUser && currentUser.id === "**************")  { %>
  <ul class="nav navbar-nav">
    <li class="active"><a href="/blogs/new"><i class="fa fa-plus" aria-hidden="true"></i>   New Blog <span class="sr-only">(current)</span></a></li>
  </ul>
  <% } %>
  <ul class="nav navbar-nav navbar-right">
    <% if(!currentUser){ %>
    <li><a href="/login"><i class="fa fa-sign-in" aria-hidden="true"></i>  Login</a></li>
    <li><a href="/register"><i class="fa fa-user-plus" aria-hidden="true"></i>  Sign up</a></li>
    <% } else { %>
    <li><a href="/profile"><div id="header-user-icon" <%if(currentUser.image ==""){ %>
          style="background:url(https://cdn1.iconfinder.com/data/icons/unique-round-blue/93/user-512.png); background-size: cover">
          <% } else { %>
          style="background:url(<%=currentUser.image%>); background-size: cover">
          <% } %>
          </div> <%= currentUser.username %> </a></li>
    <li><a href="/logout"><i class="fa fa-user" aria-hidden="true"></i>  Sign out </a></li>
    <% } %>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

很明显，我已经从最初的引导程序代码中编辑了相当多的内容，所以我想这可能是我添加的一些东西导致了这个问题。然而，我运行了一个测试，注解掉了这个代码，并将确切的引导程序示例复制到同一个文档中，它仍然无法工作，这让我相信我缺少了某种插件？真的不能弄清楚我缺少了什么来让这个工作。
更新：完整代码：
这是我的头文件中的内容：

<!DOCTYPE HTML>

<html>
<head>
    <title>NUFC Blog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</link>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"</link>
    <link rel="stylesheet" href="/stylesheets/main.css"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/components/accordion.css"</link>
    <link rel="icon" href="https://upload.wikimedia.org/wikipedia/hif/2/25/Newcastle_United_Logo.png">
</head>

<body>

<!-- nav bar -->
<nav class="navbar navbar-inverse">
<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" aria-expanded="false">
    <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="/"><i class="fa fa-futbol-o" aria-hidden="true"></i>  NUFC Blog</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="#"><i class="fa fa-envelope-o" aria-hidden="true"></i>   Contact <span class="sr-only">(current)</span></a></li>
  </ul>
  <% if(currentUser && currentUser.id === "*******") { %>
  <ul class="nav navbar-nav">
    <li class="active"><a href="/blogs/new"><i class="fa fa-plus" aria-hidden="true"></i>   New Blog <span class="sr-only">(current)</span></a></li>
  </ul>
  <% } %>
  <ul class="nav navbar-nav navbar-right">
    <% if(!currentUser){ %>
    <li><a href="/login"><i class="fa fa-sign-in" aria-hidden="true"></i>  Login</a></li>
    <li><a href="/register"><i class="fa fa-user-plus" aria-hidden="true"></i>  Sign up</a></li>
    <% } else { %>
    <li><a href="/profile"><div id="header-user-icon" <%if(currentUser.image ==""){ %>
          style="background:url(https://cdn1.iconfinder.com/data/icons/unique-round-blue/93/user-512.png); background-size: cover">
          <% } else { %>
          style="background:url(<%=currentUser.image%>); background-size: cover">
          <% } %>
          </div> <%= currentUser.username %> </a></li>
    <li><a href="/logout"><i class="fa fa-user" aria-hidden="true"></i>  Sign out </a></li>
    <% } %>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<% if(error && error.length > 0) { %>
    <div class = "container">
        <div class="alert alert-danger" role="alert">
            <%= error %>
        </div>
<% } %>
        </div>

<% if(success && success.length > 0) { %>
    <div class = "container">
        <div class="alert alert-success" role="alert">
            <%= success %>
        </div>
<% } %>
    </div>

然后我在一个单独的页脚中引用jQuery：

<script
src="https://code.jquery.com/jquery-3.2.0.js"
integrity="sha256-wPFJNIFlVY49B+CuAIrDr932XSb6Jk3J1M22M3E2ylQ="
crossorigin="anonymous"></script>
<script src = "/ajax.js"></script>

</body>

</html>

然后很明显地将页眉和页脚链接到项目中的每个其他文档

<% include ./partials/header %>

和

<% include ./partials/footer %>

Bootstrap 引导导航栏：折叠菜单在小分辨率下不展开

1条答案

相关问题

热门标签

最新问答