引导程序导航栏未折叠(移动)

Question

在移动版本中，导航栏不会折叠。。。有人能帮忙吗？我从引导程序中复制了源代码，但它不起作用。我忘了什么吗？在index.html中，我已经输入了css和js文件。我也没有收到任何错误。

import React from 'react'
import Logo from "../img/logo_large.png"
// React Font awesome imports
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars } from "@fortawesome/free-solid-svg-icons"
//React-scroll install
//Navbar
const Navbar = () => {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
<div className="container">
{/*Logo variable von oben*/}
<a className="navbar-brand" href="#home"><img className="Logo" src={Logo} /> </a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<FontAwesomeIcon icon={faBars} style={{ color: "#fff" }} />
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<a className="nav-link" href="#about" >About Me<span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#services">Services</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#experiences">Experiences</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#abilities">Abilities</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#blog">Blog</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#freetime">Freetime</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav >
)
}
export default Navbar

Answer 1

事实上，您已经复制了元素，这似乎是一个react代码，而不是纯html。引导程序的口号是"；移动电话优先"；，所以他们已经准备好开箱即用的小屏幕了，你不需要第一时间为此创建不同的代码。

为了使引导程序正常工作，您必须添加纯html引导程序元素和引导程序资源：js和css文件。

您的起点可以是：https://getbootstrap.com/docs/5.0/getting-started/introduction/#starter-模板，其中您已经有一个"；启动器模板"；完成了这些依赖关系。

之后，你可以去https://getbootstrap.com/docs/5.0/components/navbar/复制html代码并进行实验(如果有效的话(。

Answer 2

确保在链接和脚本中包含了适当的引导CSS和JS CDN。在我看来，你使用的是bootstrap，但你没有将其包含在你的标签中。