Bootstrap 导航栏：折叠的菜单不会在小分辨率上展开答案

【问题标题】：Bootstrap navbar: collapsed menu not expanding on small resolutionsBootstrap 导航栏：折叠的菜单不会在小分辨率上展开
【发布时间】：2017-10-10 02:40:05
【问题描述】：

我在我正在创建的博客网站中为我的导航栏使用引导程序。当我将屏幕尺寸缩小到移动设备时，菜单项会根据需要折叠，但是当我单击展开图标时它没有反应。这是我的代码：

<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和jquery的js文件是否正确？
我相信！我在 head 部分使用引导 CDN：maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/…>
和jquery如下：
jsfiddle.net/wqxyjmt5这是你现在拥有的吗？
是的 - 我实际上是在一个单独的文档中引用 jQuery，因为我上面粘贴的代码在我的“标题”文件中，而 jQuery CDN 在“页脚”中。话虽如此，我也通过将它们包含在同一个文件中进行了实验，并得到了相同的结果。

标签： twitter-bootstrap navbar collapse

【解决方案1】：

最终解决了这个问题并且非常简单。我引用的是 Bootstrap CSS CDN，但不是 javascript。我把它放进去，现在可以正常工作了。

【讨论】：