反应bootstrap导航栏切换不显示

时间:2019-02-06 17:04:21

标签: javascript reactjs

我正在使用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);

以下是输出:

enter image description here

0 个答案:

没有答案