Невозможно выровнять изображение вправо на панели навигации с помощью react-bootstrap

Невозможно каким-то образом выровнять это отображаемое изображение на панели навигации. Подписывайтесь на документы и используйте многие свойства 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>



Решение проблемы

Используя слегка урезанный код, вы можете сделать это двумя способами:

Первое:

<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 имеет полную ширину, и мы заключаем два наших навигационных элемента в их собственные навигационные компоненты и даем пользователю навигацию 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, вам необходимо убедиться, что Nav растянут на всю ширину, задав ему a, className='flex-grow-1'а Nav.Item, который вы хотите сдвинуть вправо, получает className='ms-auto'.

В обоих случаях вы добьетесь нужного результата и сможете использовать компоненты Dropdown или что угодно!