可以使用React-Bootstrap在Navbar中的右侧对齐图像

Question

无法以某种方式对齐此显示图像。遵循文档，并使用许多React-Bootstrap属性，例如正当权利，文本 - 单位，向右拉。但是无法做到这一点。

但是它没有显示图像。我尝试了相同的属性，但它粘在左侧。

我想将其移至右侧。

完整的Navbar代码

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

在这种情况下，Navbar组件是完整的，我们将两个NAV包装在其自己的NAV组件中，并给出用户nav 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您要推到右侧的nav.Item获取className ='MS-AUTO'。

在这两种情况下，您都可以实现自己追随的结果，并且可以使用下拉菜单或任何您喜欢的东西！