Question

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

<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>

显然我已经从最初的bootstrap代码中编辑了相当数量，所以我认为这可能是我添加的导致问题的原因。但是，我通过注释掉这段代码并将确切的bootstrap示例复制到同一文档中来进行测试，但它仍然不起作用，这让我相信我错过了某种类型的插件？真的无法解决我所缺少的问题。

更新：完整代码：

这是我头文件中的内容：

<!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 %>

Answer 1

最终解决了这个问题，非常简单。我引用了Bootstrap CSS CDN，但没有引用javascript。我把它放进去并且现在完美地工作。

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

1 个答案: