有一个现成的解决方案,用于获取可折叠的水平NavBar:

<Navbar inverse fixedTop fluid collapseOnSelect>
    <Navbar.Header>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <LinkContainer to={'/'} exact>
          <NavItem>
            <Glyphicon glyph='home' /> CollapseLink1
          </NavItem>
        </LinkContainer>
        <LinkContainer to={'/'}>
          <NavItem>
            <Glyphicon glyph='education' /> CollapseLink2
          </NavItem>
        </LinkContainer>
        <LinkContainer to={'/'}>
          <NavItem>
            <Glyphicon glyph='th-list' /> CollapseLink3
          </NavItem>
        </LinkContainer>
      </Nav>
    </Navbar.Collapse>
  </Navbar>


这样可以在大屏幕上显示水平菜单:

javascript - ReactJS:具有折叠和非折叠元素的Bootstrap4 NavBar-LMLPHP

在小屏幕上还有一个垂直菜单:

javascript - ReactJS:具有折叠和非折叠元素的Bootstrap4 NavBar-LMLPHP

但是假设我要添加几个图标按钮,无论发生什么情况,这些按钮都应始终保持右上方:

javascript - ReactJS:具有折叠和非折叠元素的Bootstrap4 NavBar-LMLPHP

javascript - ReactJS:具有折叠和非折叠元素的Bootstrap4 NavBar-LMLPHP

我已经阅读了将可折叠项目与不可折叠项目分开的示例,它们都变得非常笨拙。这必须是一个普遍的要求,没有现成的方法吗?

构造此设计的好方法是什么?

最佳答案

您可以使用“ position:absolute”来控制要查找样式和位置的2个链接...

相关的js:

class App extends Component {
  constructor() {
    super();
    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false,
      name: 'React'
    };
  }

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

  render() {
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav navbar>
              <NavItem>
                <NavLink href="/components/"> Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
              </NavItem>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Options
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>
                    Option 1
                  </DropdownItem>
                  <DropdownItem>
                    Option 2
                  </DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>
                    Reset
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </Collapse>

          <NavbarBrand href="/" className='floatRight'>
            <a href="#">[link A]</a>
            <a href="#">[link B]</a>
          </NavbarBrand>
        </Navbar>

        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
}


相关的CSS:

.floatRight{  position: absolute;    right: 0;    top: 6px;}
.floatRight a{  padding-left:10px;}
.navbar{padding:0;}
.navbar-light .navbar-toggler {margin:10px}


完成working stackblitz here

09-17 10:35
查看更多