Css 导航栏折叠按钮不显示bootstrap 4.5.0和Nextjs 9.4.4的项目

我试图创建一个非常简单的nextjs演示项目，使用bootstrap进行样式设置。 通过首先使用npm安装引导程序，然后将其包含在我的

app.js

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/css/bootstrap.min.css'

我创建了一个导航栏，它工作得很好，但当我试图使它在屏幕缩小时崩溃时，它似乎不起作用

我试图通过它找到我的方法，并且知道它需要

popperjs

和

jquery

以特定的顺序，我也这样做了。我将2包含在我的

app.js

文件中。我的意思如下

import 'jquery/dist/jquery.min.js'
import '@popperjs/core/dist/umd/popper.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'

但我的切换按钮在单击时仍然不会弹出导航栏项。我在运行项目的浏览器控制台和开发人员控制台上看不到错误

下面是我的

package.json

"dependencies": {
    "@popperjs/core": "^2.4.2",
    "bootstrap": "^4.5.0",
    "jquery": "^3.5.1",
    "next": "9.4.4",
    "react": "16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "16.13.1"
  }

我可以在SO上看到类似的问题，但所有这些问题都是针对较旧的引导版本，并且引导组件的类名不同

这是我的组件

/**
 * className to create the navbar using bootstrap, TODO, intial version
 */
export default class NavBar extends Component {
  render() {
    return (
      <div id="rootdiv">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarTogglerDemo01"
            aria-controls="navbarTogglerDemo01"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <a class="navbar-brand" href="#">
              Hidden brand
            </a>
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
              <li class="nav-item active">
                <a class="nav-link" href="#">
                  Home <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  Link
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">
                  Disabled
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}```

/**
*className使用引导、TODO和初始版本创建导航栏
*/
导出默认类导航栏扩展组件{
render（）{
返回(








);
}
}```

我不知道为什么它不能与本机引导一起工作，但在切换到react引导后，我能够让它工作。我希望这将有助于一些人在未来

此外，无需在

app.js

文件中手动导入

popper

和

jquery

。 我只导入了

bootstrap

min文件

从“react bootstrap/Navbar”导入Navbar；
从“反应引导/Nav”导入Nav；
从“React”导入React；
常量RBNavBar=（）=>{
返回(
家
接触
关于我们
);
};
导出默认RBNavBar；

我不知道为什么它不能与本机引导一起工作，但在切换到react引导后，我能够让它工作。我希望这将有助于一些人在未来

此外，无需在

app.js

文件中手动导入

popper

和

jquery

。 我只导入了

bootstrap

min文件

从“react bootstrap/Navbar”导入Navbar；
从“反应引导/Nav”导入Nav；
从“React”导入React；
常量RBNavBar=（）=>{
返回(
家
接触
关于我们
);
};
导出默认RBNavBar；

import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import React from "react";

const RBNavBar = () => {
  return (
    <Navbar bg="light" expand="lg" id="myNavbar">
      <Navbar.Brand href="#home"><img src="/logo_lpb_small.png"></img></Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ml-auto" id="myNavItem">
          <Nav.Link href="/" id="myNavItem">Home</Nav.Link>
          <Nav.Link href="contact" id= "myNavItem">Contact</Nav.Link>
          <Nav.Link href="about" id= "myNavItem">About Us</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
};

export default RBNavBar;