无法使用 react-bootstrap 在导航栏中将图像右对齐

Question

无法以某种方式在导航栏中正确对齐此显示图像。遵循文档并使用许多 react-bootstrap 属性，例如 justify-content-right、text-align、pull right。但是做不到。

但它在没有显示图像的情况下工作。我尝试了相同的属性，但它坚持在左边。

我想把它移到右边。

完整的导航栏代码

    /* Display User Code starts here. I want to move it to right */
                    <Nav>
                      {user ? (
                        <>
                          {" "}
                          <NavDropdown
                            className="ms-auto"
                            eventKey={1}
                            title={
                              <img
                                className="user_image"
                                src="https://i.ibb.co/LJ2BGT2/121105442-creative-illustration-of-default-avatar-profile-placeholder-isolated-on-background-art-des.webp"
                                alt="user pic"
                              />
                            }
                            id="basic-nav-dropdown"
                          >
                            <NavDropdown.Item to="/addproduct">
                              Add Product
                            </NavDropdown.Item>
                            <NavDropdown.Item to="/manageproduct">
                              Manage Product
                            </NavDropdown.Item>
                            <NavDropdown.Item
                              to="/order"
                              className="justify-content-center"
                            >
                              Order
                              <Badge className="mx-2 mt-2 " bg="dark">
                                9
                              </Badge>
                              <span className="visually-hidden">
                                unread messages
                              </span>
                            </NavDropdown.Item>
                            <NavDropdown.Item divider />
                            <NavDropdown.Item eventKey={1.3}>
                              <Button
                                variant="primary"
                                size="sm"
                                className="mx-2"
                                onClick={handleSignOut}
                              >
                                Sign Out
                              </Button>
                            </NavDropdown.Item>
                          </NavDropdown>{" "}
                        </>
                      ) : (
                        <>
                          {" "}
                          <CustomLink to="/login">Login</CustomLink>
                          <CustomLink to="/register">Register</CustomLink>
                        </>
                      )}
                    </Nav>
                

Answer 1

使用稍微精简的代码，有两种方法可以做到：

第一个：

        <Navbar>
            <Navbar.Brand>Brand text</Navbar.Brand>
            <Nav>
                <Nav.Item>
                    <Nav.Link as={Link} to='/'>
                        Home
                    </Nav.Link>
                </Nav.Item>
            </Nav>
            <Nav className='ms-auto'>
                <Nav.Item>
                    <Nav.Link as={Link} to='/login'>
                        Login
                    </Nav.Link>
                </Nav.Item>
            </Nav>
        </Navbar>

在这种情况下，导航栏组件是全宽的，我们将两个导航组件包装在它们自己的导航组件中，并为用户提供导航 className='ms-auto' 以将其推到右侧。

第二个选项：

         <Navbar>
            <Navbar.Brand>Brand text</Navbar.Brand>
            <Nav className='flex-grow-1'>
                <Nav.Item>
                    <Nav.Link as={Link} to='/'>
                        Home
                    </Nav.Link>
                </Nav.Item>
                <Nav.Item className='ms-auto'>
                    <Nav.Link as={Link} to='/login'>
                        Login
                    </Nav.Link>
                </Nav.Item>
            </Nav>
        </Navbar>

在这种情况下，您使用一个 Nav 组件，但根据@JBatstone 的评论，您需要通过给它一个 className='flex-grow-1' 和 Nav.Item 你想向右推得到一个 className='ms-auto'.

在这两种情况下，您都将获得想要的结果，并且可以使用下拉组件或任何您喜欢的组件！