Question

我需要在右侧放置链接，在左侧放置带有徽标的徽标。我什至无法使用！important来省略默认的引导样式。

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

我希望它也能解决您的问题。

如何在导航栏上对齐项目

1 个答案: