代码之家 › 专栏 › 技术社区 › fedeteka

引导折叠可以,但汉堡包菜单没有显示项目

twitter-bootstrap-3 node.js

fedeteka · 技术社区 · 6 年前

遵循YelpCamp的教程。我也读过这个网站上的帖子,但我还是不明白为什么汉堡包菜单显示时菜单上的项目没有出现:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Imperial Fleet</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="/stylesheets/main.css">
  </head>

  <body>

  <nav class="navbar navbar-default">
    <div class="container-fluid">
        <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="/">Imperial Fleet</a>
        </div>

        <div class="collapse navbar-collapse">

          <ul class="nav navbar-nav navbar-right">
              <li><a href="/ships">Ships</a></li>
              <li><a href="/fleets">Fleets</a></li>
              <li><a href="/bases">Bases</a></li>

              <% if(!currentUser){ %>
                  <li><a href="/login">Login</a></li>
                  <li><a href="/register">Sign up</a></li>
                <% } else { %>
                  <li><a href="#">Signed in as: <%= currentUser.username %></a></li>
                  <li><a href="/logout">Logout</a></li>
                <% } %>
          </ul>
        </div>
    </div>
</nav>

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

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

最后 <div class="container">

仅用于显示闪存连接消息

2 回复 | 直到 6 年前

Dumitru Chirutac 6 年前

你的页面上有JS插件吗?

跟随 Docs :

需要javascript插件

如果禁用了javascript,并且视区足够窄, 导航栏折叠,无法展开导航栏并查看中的内容 .导航栏折叠 .

响应式导航栏要求 collapse plugin 包括在您的引导程序版本。

fedeteka 6 年前

错误就在这条线上:

错误:

<div class="collapse navbar-collapse">

解决方案:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

我忘记带身份证了。

推荐文章

pixelpete36 · 在vscode中通过npm加载React时,是否需要在HTML文件中使用<script>标记?

1 年前

Iseoluwa ariyibi · 获取未定义的控制台后日志记录req.body

1 年前

Guilherme Doherty Marques · Javascript机器人检查签证预约不起作用,我不知道如何解决

1 年前

AlaaKudo810 · 无法更新猫鼬中的对象

1 年前

Unnikrishnan KJ · 由于“TypeError”,路径“pathname”处的值“[]”(类型为Array)转换为数组失败

1 年前

Ananya S · 请求hashicorp保险库通过cURL工作,但不通过node-js程序

1 年前

Daniel Varentsoff · 如何使用bullmq重试成功的作业

1 年前

Alireza Keshvari · 如何在ws和express中向具有不同工作人员的所有客户端广播消息?

1 年前

Foobar · 如何在Fastify中为请求附加“项目”密钥?

1 年前

chrispytoes · 从服务器端获取登录用户

1 年前