css - 在 React 中更改 Navbar.Collapse 展开图标的位置

Question

我目前正在使用Navbarreact-bootstrap 中的组件构建导航栏。这是它看起来完全展开和折叠时的样子：

我想弄清楚的是，如何将展开图标定位在右侧，将图标+按钮定位在左侧

这是我的代码：

     <Navbar expand="lg" className="navbar" variant="dark" bg="dark">
        <Navbar.Brand style={{fontWeight: 600}}>The Originals</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav
            className="mr-auto my-2 my-lg-0"
            style={{ maxHeight: '300px' }}
            navbarScroll
          >
            <Nav.Link>Home</Nav.Link>
            <Nav.Link>Explore</Nav.Link>
            <Nav.Link>Profile</Nav.Link>
          </Nav>
          <Form className="d-flex" id="navbarSearch">
            <FormControl
              type="search"
              placeholder="Search"
              className="mr-2"
              aria-label="Search"
            />
          </Form>
        </Navbar.Collapse>
        <Nav>
          <div className="navbarUtilities">
            <Button variant="primary" id="connectWalletButton" onClick={toggleShow}>Connect Wallet</Button>
            <NotificationsIcon fontSize="large" style={{color: "#c9c9c9"}} id="notificationsIcon"/>
            <SettingsIcon fontSize="large" style={{color: "#c9c9c9", display: 'inline-block'}}/>
          </div>
        </Nav> 
      </Navbar>