Javascript ReactJS:Bootstrap4导航栏，包含折叠和非折叠项

有一个现成的解决方案可以获得可折叠的水平导航栏：

<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>

塌陷线1
胶原蛋白2
塌陷线3

这在大屏幕上提供了一个水平菜单：

以及小屏幕上的垂直菜单：

但假设我想添加两个图标按钮，无论发生什么情况，这些按钮都应始终保持在右上方：

我读过将可折叠项和不可折叠项分开的例子，它们很快就会变得非常笨拙。这必须是一个共同的要求，没有现成的方法吗

---

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

您可以使用“位置：绝对”来控制您要设计和放置的两个链接

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

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

---

完整的引导使用Flexbox。即使没有，你也可以用它制作自己的div。