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



在移动版本中,导航栏不会折叠。。。有人能帮忙吗。有人看到我的错误了吗?我从引导程序中复制了源代码,但它不起作用。它不起作用,因为我的工作反应?我将感谢的任何帮助

文件App.js

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
//Partikeln importieren
import Particles from 'react-particles-js';
//Hier importiert man seine Komponenten
import Navbar from "./components/Navbar";
import Header from "./components/Header";
...
...
...

文件导航条形码

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

删除具有container名称的div元素。

最新更新