引导导航栏未折叠（移动）

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。引导口号是“手机优先”，因此它们已准备好开箱即用的小屏幕，您无需在第一次为此创建不同的代码。

为了让bootstrap正常工作，你必须添加纯html bootstrap元素和bootstrap资源：至少js和css文件。

您的起点可以是：https://getbootstrap.com/docs/5.0/getting-started/introduction/#starter-template，您已经有一个“入门模板”，完成了这些依赖项。

之后，你可以去https://getbootstrap.com/docs/5.0/components/navbar/复制html代码，试试看是否可行。

Answer 2

确保您已在链接和脚本中包含适当的引导 CSS 和 JS CDN。在我看来，您正在使用引导程序，但您没有将其包含在您的标签中。