如何让我的引导导航栏响应屏幕尺寸？

Question

我的导航栏响应能力有问题。 它将按照屏幕显示，但不会显示任何列出的选项（指向其他页面的链接）。 如何使我的引导程序以汉堡包形式显示选项（列出的链接）（彼此下方的三行）？

我的 Navigation.js 中有我的引导程序，index.js/app.js 中有我的引导程序 css（两者都是以防万一）。

• 你的意见很有价值

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import { Link } from "react-router-dom";
import {useDispatch,useSelector} from 'react-redux'
import {useAlert} from 'react-alert'
import {logout} from '../actions/userActions'


function Navi() {

  const alert = useAlert();
  const dispatch = useDispatch();

  const {user,loading} = useSelector(state=>state.auth);

  const logoutHandler = ()=>{
    dispatch(logout())
    alert.success('Logged out Successfully')
  }

  return (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Container>
        <Navbar.Brand href="/">Title</Navbar.Brand>
        <Navbar.Toggle className ="responsive-navbar-nav" />
        <Navbar.Collapse className ="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="/prod">Product</Nav.Link>
            <Nav.Link href="/vision">Vision</Nav.Link>
            {/* <Nav.Link href="/faqs">FAQS</Nav.Link> */}

            {/* <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown> */}
          </Nav>
          <Nav className="nav-link">
            <Nav.Link to = '/cart' style ={{textDecoration: 'none'}}>
              <span id="cart" className="ml-3">Cart</span>
              <span className="ml-1" id="cart_count">2</span>
            </Nav.Link>


            {user ? (

            <div className='ml-4 dropdown d-inline'>
              <Nav.Link to ='#!'className='btn dropdown-toggle text-white' type='button' id='dropDownMenuButton'
              data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
                <figure className='avatar avatar-nav'>
                    <img src={user.avatar && user.avatar.url}
                    alt ={user && user.name}
                    className = 'rounded-circle'/>
                </figure>
                <span>{user && user.name}</span>
                </Nav.Link>
                <div className='dropdown-menu' aria-labelledby='dropDownMenuButton'>

                  {user && user?.role !== 'admin'?(

                    // <NavDropdown.Item className='dropdown-item' href='/about'> About</NavDropdown.Item>

                    <NavDropdown.Item className='dropdown-item' href='/content'> Content</NavDropdown.Item>


                  ):(
                    <>
                    <NavDropdown.Item className='dropdown-item' href='/admin/dashboard'> Dashboard</NavDropdown.Item>
                    <NavDropdown.Item className='dropdown-item' href='/content'> Content</NavDropdown.Item></>

                  )}

                  <NavDropdown.Item className='dropdown-item' href='/pitch'> Pitch</NavDropdown.Item>
                  {/* <NavDropdown.Item className='dropdown-item' href='/me'> Profile</NavDropdown.Item> */}


                  <NavDropdown.Item className='dropdown-item text-danger' href = '/' onClick={logoutHandler}>
                      Logout
                  </NavDropdown.Item>

                </div>
            </div>

            ):!loading && <Nav.Link  href="/login" >Login</Nav.Link> }



            {/* <Nav.Link href="/login" >Login</Nav.Link> */}
            {/* <Nav.Link eventKey={2} href="/cart">


            </Nav.Link> */}
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default Navi;