引导导航栏扩展被切断（带视频）

Question

我正在制作一个反应应用程序，并通过

安装了最新的引导程序

npm install bootstrap

和

npm install bootstrap jquery

和

npm install jquery popper.js

当窗口很宽时，我的导航栏工作正常，但是当您减小宽度并且导航栏变成下拉导航栏时，它就无法正常工作。当您单击展开时，它开始展开，但随后被切断，使其看起来像是停止或离开页面。我只能看到最后一项。

在我的 src/index.js 中我有 和

import 'jquery';
import 'popper.js';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

我的导航栏代码很简单

                <nav className="navbar navbar-expand-lg">
                    <div className="container-fluid">
                        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <i className="fas fa-bars"></i>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarSupportedContent">
                            <Links />
                        </div>
                    </div>
                </nav>

我尝试过删除和删除不同的类，这似乎是问题根源所在的按钮切换操作。

更新：链接到视频以可视化问题：videoLink

Answer 1

这可能是缺少 jquery 依赖项。

首先，通过npm安装jquery和popper.js：

npm 安装 jquery popper.js

在 Bootstrap 之前在 src/index.js 文件中导入 jquery 和 popper.js JavaScript：

javascript

  导入'jquery';

  导入'popper.js';

  导入'bootstrap/dist/css/bootstrap.css';

  导入'bootstrap/dist/js/bootstrap.bundle.min';

Your Navbar component code appears to be OK.