我正在使用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);
以下是输出: