как выровнять элементы на панели навигации

Question

Мне нужно разместить ссылки справа, а go с формой слева. Я даже не могу выровнять, используя! Important, чтобы опустить стиль по умолчанию bootstrap.

<Navbar bg="light" expand="lg" className='navBar'> 
             <div className='container'>
                <FaLinkedin  className='linkedIn'/>
            <Navbar.Brand href="#home">

            </Navbar.Brand>

              <Form inline>
                <FormControl type="text" placeholder="Search" className="mr-sm-2" />

              </Form>



            <Navbar.Toggle aria-controls="basic-navbar-nav" />

            <Navbar.Collapse id="basic-navbar-nav">

              <Nav className="mr-auto" className='text-white'>
                <Nav.Link className='text-white' href="#home">
                    <FaHome />
                    Home</Nav.Link>
                <Nav.Link className='text-white'>

                    My Network</Nav.Link>
                <Nav.Link className='text-white'>
                    <FaSuitcase />
                    Jobs</Nav.Link>
                <Nav.Link className='text-white'>

                    Messaging</Nav.Link>
                <Nav.Link className='text-white'>

                    Notifications</Nav.Link>
                <NavDropdown className='text-white' title="Dropdown" id="basic-nav-dropdown" title='Me'>
                  <NavDropdown.Item href="#action/3.1">My</NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                  <NavDropdown.Divider />
                  <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown" title='Work'>
                  <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                  <NavDropdown.Divider />
                  <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
                <Nav.Link className='text-white' href="#link">
                    <FaVideo />
                    Learning</Nav.Link>
              </Nav>

            </Navbar.Collapse>
            </div>
          </Navbar>

Я пытался добавить <nav className="navbar navbar-expand-lg navbar-light bg-light justify-content-between">, но это не сработало. Итак, как я могу отображать отображение между. И еще у меня есть выпадающие ссылки с цветом проблемы в белом цвете.

Answer 1

У меня была такая же проблема в одном из моих проектов, я не знаю, лучший ли это подход, но я добавил пустую ссылку, как показано ниже, и она сработала:

<Nav.Link className="ml-auto"/>

Надеюсь, это решит вашу проблема тоже.