Question

我在尝试使用Bootstrap创建导航栏时遇到此错误，结果应该是一个导航栏，但它不是，试图理解我在编辑器（Atom）中复制W3schools代码（https://www.w3schools.com/bootstrap/bootstrap_navbar.asp）的错误的性质。我的代码和W3schools的代码都不起作用，但它们似乎写得正确。我哪里错了？我可以请你帮忙吗？

这是我的代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

  <body>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

    <nav class=“navbar”>

      <nav class="navbar">
        <a class="navbar-brand" href=“#”>Something</a>
        <ul class="navbar-nav">
          <li class="nav-item"><a href="#" class="nav-link">One</li>
    </ul>
</nav>
</body>
</html>

＆＃13;

Answer 1

在包含bootstrap之前，你应该包含jquery ...... 例如：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Answer 2

更改文本格式的引号。

 <nav class=“navbar”>

至非文本格式化报价。

 <nav class="navbar">

Answer 3

在你的代码中，你使用的是Bootstrap 4.x，它是最新版本，完全不同，很多东西在3.x和4.x之间看起来非常相似，但简而言之，在3.x中运行的任何东西都有更多机会打破4.x.

因此，不要使用W3School的代码作为参考，而是使用Twitter Bootstrap的4.0版文档： https://getbootstrap.com/docs/4.0/getting-started/introduction/

此外，您的HTML代码看起来不太正确，例如此行

<li class="nav-item"><a href="#" class="nav-link">One</li>

您忘了关闭<a>。因此，重要的是要查看代码并查看是否由语法错误引起了某些问题。除此之外，如果修复代码，输出就是你从HTML中得到的。没有什么类型的导航栏，因为你必须按照Twitter Bootstrap 4的指南来布局导航栏

https://getbootstrap.com/docs/4.0/components/navbar/

另一个问题是你已经boostrap.min.js放在jQuery之前，因为Bootstrap的JavaScript工作首先必须加载jQuery。

祝你好运。

为什么导航栏中没有正确显示导航栏？

3 个答案: