Question

我正在学习Angular，并且正在尝试在移动屏幕中配置Navbar。我在angular.json文件中导入了jQuery，Popper和Bootstrap。现在，当我单击菜单时，什么也没有发生。我想念什么？

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky">
  <div class="d-flex flex-grow-1">
      <span class="w-100 d-lg-none d-block"></span>
      <a class="navbar-brand d-none d-lg-inline-block" routerLink="/">
          MA
      </a>
      <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" routerLink="/">
          <img src="//placehold.it/40?text=LOGO" alt="logo">
      </a>
      <div class="w-100 text-right">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
              <span class="navbar-toggler-icon"></span>
          </button>
      </div>
  </div>
  <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
      <ul class="navbar-nav ml-auto flex-nowrap">
        <li class="nav-item">
            <a class="nav-link m-2 menu-item nav-active" href="#about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link m-2 menu-item nav-active" href="#portfolio">Portfolio</a>
        </li>
        <li class="nav-item">
            <a class="nav-link m-2 menu-item" href="#contact">Contact</a>
        </li>
      </ul>
  </div>

Answer 1

这有效

执行npm安装：〜 npm i bootstrap jquery --save

选项1

在angular.json中添加以下内容：〜

    "styles": [
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ],

选项2

在您的index.html
中添加以下链接和脚本

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

希望这会有所帮助！

Angular-Navbar折叠不响应

1 个答案:

这有效