Question

单击它时，我的汉堡按钮不起作用。我正在使用bootstrap并且我遵循了bootstrap文档，但似乎没有任何工作。我还按照其他帖子提到的顺序放了我的bootstrap.js和jquery。

有关正在发生的事情的任何想法？我的链接是错误的顺序还是不起作用？任何帮助，将不胜感激。谢谢！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Gloriane Tran's personal website with information about her academic work and projects.">
<meta name="author" content="Gloriane Tran">

<!--JQuery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

<!--Bootstrap Themes-->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javacsript" src="/bootstrap/js/bootstrap.min.js"></script>

<!--Icons-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<!--Stylesheets-->
<link href="/stylesheets/footer.css" rel="stylesheet">
<link href="/stylesheets/font.css" rel="stylesheet">
<link href="/stylesheets/nav.css" rel="stylesheet">

<!--Fonts-->
<link href="https://fonts.googleapis.com/css?family=Oxygen|Rufina" rel="stylesheet">

<!--Page Title -->
<title>Gloriane Tran | Home</title>
<link href="/stylesheets/index.css" rel="stylesheet">
</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
    <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
        <a class="navbar-brand rufina" href="/">Gloriane Tran</a>
    </div>

    <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav navbar-right rufina">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/projects">Projects</a></a></li>
        </ul>
    </div>
</div>
</nav>

</body>

</html>

Answer 1

确保您是最新的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

经过测试，确实有效！

<!DOCTYPE html>
<html lang="en-US">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
        <a class="navbar-brand rufina" href="/">Gloriane Tran</a>
      </div>

      <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav navbar-right rufina">
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/projects">Projects</a></a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

bootstrap汉堡包菜单不工作点击

1 个答案: