"搜索栏"即使我使用 d-flex justify-content-end 也不会向右侧移动"？

Question

有人能告诉我哪里出错了吗？我想移动右边末尾的搜索栏。

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

Answer 1

将form元素带到id:expandme之外，然后尝试使用"d-flex调整内容端"；

<!-- 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>