javascript - 反应引导导航栏切换不显示

Question

我正在使用 react bootstrap 来制作我的导航栏。当窗口的宽度很小时，会出现切换按钮，但是单击按钮后，我的导航项就无法出现。它接缝导航栏的高度是固定的。如何解决这个问题？

这是我的代码：

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import Payments from "./Payments";
import { LinkContainer } from "react-router-bootstrap";
import {
  Navbar,
  Nav,
  NavItem,
  NavDropdown,
  MenuItem,
  Container,
  Card,
  Button
} from "react-bootstrap";

class Header extends Component {

  render() {
    return (
      <Container>
        <Navbar collapseOnSelect bg="dark" variant="dark" expand="lg">
          <LinkContainer to={this.props.auth ? "/surveys" : "/"}>
            <Navbar.Brand>Emaily</Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#link">Link</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </Container>

    );
  }
}

function mapStateToProps({ auth }) {
  return { auth };
}
export default connect(mapStateToProps)(Header);

这是输出：

标签： javascriptreactjs