如何使用Reactstrap默认折叠Navbar?

时间:2017-09-04 22:59:10

标签: reactjs bootstrap-4 reactstrap

我在节点应用程序上使用bootstrap4的reactstrap impimentation。这是我的第一次,我需要一点帮助。如何使导航栏始终折叠(无论屏幕大小)? 这是来自reactstrap github页面的示例代码:

class App extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });

render() {
return (
<Navbar color="inverse" inverse toggleable>
          <NavbarToggler right onClick={this.toggle} />
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
)}

1 个答案:

答案 0 :(得分:0)

这可能会有所帮助。

文档中有一个例子。 https://reactstrap.github.io/components/navbar/

render(){     回来(                                                   reactstrap                                             组件                                               Github上                                                            );