在这种情况下，如何使React-bootstrap Navbar Hamburger正常工作

如何解决在这种情况下，如何使React-bootstrap Navbar Hamburger正常工作

我学习了React和JavaScript，并发现了这个使用react-bootstrap的SandBox。它具有一个汉堡图像，作为react-bootstrap NavBar中的下拉菜单。

像这样关闭菜单：

带有打开的汉堡菜单：

当我尝试使用VSCode中的代码时，我无法得到任何汉堡包甚至下拉样式。我看不到汉堡图像的来源，也许它是内置在react-bootstrap中的吗？
我所得到的就是这个：

这是我的代码：

import React from 'react';
import { connect } from 'react-redux';
import { Navbar,Nav,Form,FormControl,Button,NavDropdown,Container,Col } from 'react-bootstrap';
import logo1 from '../../assets/The first 100 weeks in pictures and more7.png';
import 'bootstrap/dist/css/bootstrap.min.css';

class NavBar extends React.Component {
    constructor() {
        super();
        this.state = { showMenu: false };
        this.handleMenuClick = this.handleMenuClick.bind(this);
    }

    handleMenuClick() {
        const { showMenu } = this.state;
        this.setState({ showMenu: !showMenu });
    }

    render() {
        const { showMenu } = this.props;
        const { articles } = this.props;

        return (
            <>
                <Navbar expand="lg" bg="dark" variant="dark" fixed="top" collapSEOnSelect expand="lg">
                    <Container fluid>
                        <Col md="auto">
                            <Navbar.Brand href="#home" className="img-container">
                                <img alt="" src={logo1} />
                            </Navbar.Brand>
                        </Col>
                        <Col md="auto">
                            <Nav.Item>
                                <Form inline>
                                    <FormControl type="text" placeholder="Search Title,event,date" className="mr-sm-2" size="lg" />
                                </Form>
                            </Nav.Item>
                        </Col>
                        <Col>
                            <Nav.Item>
                                <Button variant="outline-info" size="lg">
                                    Search
                                </Button>
                            </Nav.Item>
                        </Col>
                        <Col md="auto">
                            <Button variant="primary" size="huge">
                                Articles
                            </Button>{' '}
                            <Button variant="primary" size="huge">
                                Timeline
                            </Button>{' '}
                            <Button variant="primary" size="huge">
                                About
                            </Button>{' '}
                        </Col>
                        <Col md="auto">
                            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                            <Navbar.Collapse id="responsive-navbar-nav">
                                <Nav className="mr-auto">
                                    <Nav.Link href="#features">Features</Nav.Link>
                                    <Nav.Link href="#pricing">Pricing</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>
                                    <Nav.Link href="#deets">More deets</Nav.Link>
                                    <Nav.Link eventKey={2} href="#memes">
                                        Dank memes
                                    </Nav.Link>
                                </Nav>
                            </Navbar.Collapse>
                        </Col>
                    </Container>
                </Navbar>
            </>
        );
    }
}

const mapStatetoProps = state => {
    return { articles: state.rootReducer.remoteArticles };
};

const Aaa = connect(mapStatetoProps,null)(NavBar);
export default Aaa;

解决方法

如果您希望甚至在桌面上也显示汉堡布局（移动布局），则可以将false分配给expand道具。

<Navbar expand={false} bg="dark" variant="dark" fixed="top" collapseOnSelect>

关于从视口右侧滑动的导航菜单（请参阅OP注释部分），这不是<Navbar.Collapse/>的构建目的-因此它不是内置功能。但是，Bootstrap样式表很容易覆盖，因此您只需为该问题编写自己的自定义CSS。

这是我写的一些基本示例：

nav .navbar-collapse {
  position: fixed;
  top: 56px;
  background: #343a40;
  right: -100%; /* pull the menu out of the viewport from right */
  width: 100vw;
  height: 100vh;
  display: block;
  transition: right 0.3s ease; /* transition for smooth sliding */
}

nav .navbar-collapse.show {
  right: 0; /* push the menu back to viewport */
}