Question

有一种现成的解决方案，用于获取可折叠的水平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>

这会在大屏幕上显示水平菜单：

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

但是假设我要添加几个图标按钮，无论发生什么情况，这些按钮都应始终位于右上方：

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

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

Answer 1

您可以使用“ 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>
    );
  }
}

ReactJS：具有折叠和非折叠项目的Bootstrap4 NavBar

1 个答案: