在这种情况下，我怎样才能让 react-bootstrap Navbar Hamburger 工作

Question

我学习 React 和 JavaScript 并遇到了这个 SandBox 使用 react-bootstrap。它在 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;

Answer 1

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

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

关于从视口右侧滑动的导航菜单（请参阅 OP 评论部分），这不是 <Navbar.Collapse/> 的目的 - 因此它不是 built-in 功能。但是，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 */
}

在这种情况下，我怎样才能让 react-bootstrap Navbar Hamburger 工作

How can I get react-bootstrap Navbar Hamburger to work in this case

reactjs

react-bootstrap

hamburger-menu