Nav not collapsing when a NavItem is selected on mobile devices

问题

I'm building a navbar that is expected to be responsive when it switches to mobile devices. In other words, collapse when mobile, then when the navitems are selected / clicked, it should route to the path and collapse all navitems to a toggle-style bar. However, below a snapshot of what I got and it's associated code:

CODE:

render() {
return (
  !this.state.isAuthenticating &&
  <div className="App">
    <Navbar fluid collapseOnSelect>
      <Navbar.Header>
        <Navbar.Brand>
         <LinkContainer to="/">
           <a>
           <img src={logo} alt="logo" height="70" width="75"/>
           <p>hybriData</p>
           </a>
         </LinkContainer>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Navbar.Collapse>
        <Nav pullRight>
          {this.state.isAuthenticated
            ? <Fragment>
                <LinkContainer to="/settings">
                  <NavItem>Settings</NavItem>
                </LinkContainer>
                <NavItem eventKey={1} onClick={this.handleLogout}>Logout</NavItem>
              </Fragment>
            : <Fragment>
                <LinkContainer to="/About Us">
                <NavItem eventKey={2}>About Us</NavItem>
                </LinkContainer>
                <LinkContainer to="/Contact">
                  <NavItem eventKey={3}>Contact</NavItem>
                </LinkContainer>
                <LinkContainer to="/works">
                  <NavItem eventKey={5}>Works</NavItem>
                </LinkContainer>
                <LinkContainer to="/signin">
                  <NavItem eventKey={6}>SignIn</NavItem>
                </LinkContainer>
              </Fragment>
          }
        </Nav>
      </Navbar.Collapse>
    </Navbar>
    </div>
  );
}

I also integrated some of this solution react-bootstrap how to collapse menu when item is selected using the expanded and onSelect props of the navbar and nav's activeKey and onSelect props to achieve desired functionality but to no fruition. How can I implement desired functionality of having all navitem's collapsed when any path(s) is navigated to , clicked / selected? Thank you

回答1:

Here is a simplified working example. It's about the order of items. If you look at the bootstrap CSS, you see some styles like

.nav > li {
  position: relative;
  display: block;
}}

The > symbol is a selector that selects all immediate descendants or children (first 'wrap layer' only, not applied to second 'wrap layer'), namely if you have

<ul class="nav">
 <div>
  <li>something</li>
  <li>something</li>
 </div>
</ul>

the styles are not applied, while

<ul class="nav">
 <li>something</li>
 <li>something</li>
</ul>

works. In your case, try replacing the <Fragment> with <Nav> and remove the outer <Nav>.

Another part you may want to modify is the LinkContainer wrapping the NavItem part. Usually we have <li> (NavItem) wrapping <a> (Link) but not the other way round.

Although react-bootstrap makes the code easier to read, it abstracts the details and may be harder to get something working. If you have difficulty with react-bootstrap, I suggest you to stick with pure bootstrap elements. The codes are slightly longer but the appearance is the same. You can follow w3schools to use bootstrap styles.

来源：https://stackoverflow.com/questions/51623736/nav-not-collapsing-when-a-navitem-is-selected-on-mobile-devices

标签

reactjs

twitter-bootstrap

react-bootstrap

react-router-dom

react-router-bootstrap