React JS Navbar对于小屏幕无法正确响应

我为navBar使用react-bootstrap,但在小屏幕上无法正常使用。

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import buttonStyle from '../css/IndexCard.module.css';

function Header() {
    return (
        <Navbar collapseOnSelect expand="md" style={{ background: 'rgb(220, 220, 230)', height: 70, boxShadow: '0 4px 7px rgba(0,0,0,.3)' }}>
            <Navbar.Brand href="/" style={{ fontSize: 30, fontWeight: 800, color: 'white' }}>NVOI</Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="mr-auto">
                    <Nav.Link href="/services" style={{ color: 'black' }}>Services</Nav.Link>
                    <Nav.Link href="/learn" style={{ color: 'black' }}>Learn</Nav.Link>
                    <Nav.Link href="/customer" style={{ color: 'black' }}>For Customers</Nav.Link>
                </Nav>
                <Nav.Link href="/login" style={{ color: 'black' }}>LOGIN</Nav.Link>
                <Nav.Link href="/signup">
                    <button className={buttonStyle.getStartedButton}>Get Started</button>
                </Nav.Link>
            </Navbar.Collapse>
        </Navbar>
    );
}

export default Header;

对于更大的屏幕,一切正常

On Windows screen

For Small Screens it is giving vertical orientation I want this box in the right corner

I am using react documentation as a reference: https://react-bootstrap.github.io/components/navbar/?fbclid=IwAR2v0VJN8Mf6YDcV2d2z4PI7V9-0MkkS0eq6jsRAMlgnAZptETDyufdD73k

评论