Может ли кто-нибудь сказать мне, где я ошибаюсь? я хочу переместить панель поиска в конец правой стороны.
<nav class = "navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class = "container">
<a class = "navbar-brand" href = "#">Navbar</a>
<button class = "navbar-toggler" data-bs-toggle = "collapse" data-bs-target = "#expandme">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "expandme">
<div class = "navbar-nav">
<a href = "#Home" class = "nav-item nav-link">Home</a>
<a href = "#About" class = "nav-item nav-link">About</a>
<a href = "#Contact" class = "nav-item nav-link">Contact</a>
</div>
<form class = "d-flex justify-content-end">
<input class = "form-control me-2 " type = "search" placeholder = "Search" aria-label = "Search">
<button class = "btn btn-outline-light" type = "submit">Search</button>
</form>
</div>
</div>
</nav>
Вынесите элемент формы за пределы id:expandme, затем попробуйте использовать "d-flex justify-content-end"
<!-- Bootstrap CSS -->
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel = "stylesheet"/>
<nav class = "navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class = "container">
<a class = "navbar-brand" href = "#">Navbar</a>
<button class = "navbar-toggler" data-bs-toggle = "collapse" data-bs-target = "#expandme">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "expandme">
<div class = "navbar-nav">
<a href = "#Home" class = "nav-item nav-link">Home</a>
<a href = "#About" class = "nav-item nav-link">About</a>
<a href = "#Contact" class = "nav-item nav-link">Contact</a>
</div>
</div>
<form class = "d-flex justify-content-end">
<input class = "form-control mx-2" type = "search" placeholder = "Search" aria-label = "Search">
<button class = "btn btn-outline-light" type = "submit">Search</button>
</form>
</div>
</nav>
Сделайте фрагмент здесь или jsfiddle.