Nav не рушится, когда NavItem выбран на мобильных устройствах

Question

Я строю навигационную панель, которая, как ожидается, будет реагировать при переключении на мобильные устройства. Другими словами, сворачивание, когда мобильно, затем, когда навигационные элементы выбраны / нажаты, это должно направить к пути и свернуть все навигационные элементы в панель стиля переключателя. Тем не менее, ниже снимок того, что я получил и связанный с ним код:

КОД:

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>
  );
}

Я также интегрировал некоторые из этого решения " ответ-бутстрап", как свернуть меню, когда элемент выбран, используя расширенные и onSelect реквизиты navbar и nav's activeKey и onSelect, чтобы достичь желаемой функциональности, но безрезультатно. Как я могу реализовать желаемую функциональность, когда все navitem свернуты, когда на любой путь (пути) переходят, щелкают / выбираются? Спасибо

Answer 1

Вот упрощенный рабочий пример. Речь идет о порядке товаров. Если вы посмотрите на загрузочный CSS, вы увидите некоторые стили, такие как

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

Символ> - это селектор, который выбирает всех непосредственных потомков или потомков (только первый "слой обертки", не применяется ко второму "слою обтекания"), а именно, если у вас есть

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

стили не применяются, в то время как

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

работает. В вашем случае попробуйте заменить <Fragment> с <Nav> и удалить внешнюю <Nav>,

Другая часть, которую вы можете захотеть изменить - это LinkContainer, заключающий в себе часть NavItem. Обычно у нас есть <li> (NavItem) упаковка <a> (Ссылка) но не наоборот.

Несмотря на то, что response-bootstrap облегчает чтение кода, он абстрагирует детали и может быть сложнее заставить что-то работать. Если у вас возникли трудности с реакции-бутстрапом, я предлагаю вам придерживаться чистых элементов бутстрапа. Коды немного длиннее, но внешний вид такой же. Вы можете следовать w3schools, чтобы использовать стили начальной загрузки.