我使用 Boostrap 4.5.2 创建了一个导航栏。在我的导航栏中，我想要一个与“浏览”选项卡一起使用的下拉列表。我的浏览选项卡有三个与之关联的选项。当我点击“浏览”标签时；我的下拉菜单显示正确的内容，但它出现在导航栏的最开始。任何解决此问题的帮助将不胜感激。下面我附上了我的导航栏代码和发生的事情的 gif。
<div class="row d-flex align-items-center" id="top-bar">
<!--Website title-->
<div class="col-auto"><h1>My Website</h1></div>
<!--nav bar-->
<div class="col-auto">
<nav class="navbar navbar-expand-lg" id="nav">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./advanced_search.html">Advanced Search</a>
</li>
<li class="nav-item nav-dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Browse
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="./Part01_PostList.php"
>Posts</a
>
<a class="dropdown-item" href="./Part02_SinglePost.php?post_id=1"
>Images</a
>
<a class="dropdown-item" href="./Part03_SingleImage.php?image_id=1"
>Users</a
>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!--Utility dropdown-->
<div class="nav-dropdown mx-auto" id="utility-nav">
<i class="fa fa-cog btn btn-secondary" type="button" id="utility-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./favorites-list.php">Favorites List</a>
<a class="dropdown-item" href="#">Account</a>
<a class="dropdown-item" href="#">Register</a>
<a class="dropdown-item" href="#">Login</a>
</div>
</div>
<!--Search bar-->
<div class="col-auto ml-auto">
<form action="./Part04_Search.php" method="POST" class="form-inline my-2 my-lg-0" id="search-bar">
<input
class="form-control mr-sm-2"
type="text"
name="title-alt"
placeholder="Search"
aria-label="Search"
/>
<button class="btn-primary" id="search-btn" type="submit">
Search
</button>
</form>
</div>
</div>
答案 0 :(得分：0)
您的菜单向左结束，因为在列表项中，您使用的是 nav-dropdown, 类，但这不是 Bootstrap 类。如果您将其更改为 dropdown（或 dropleft 或 dropright），则下拉菜单将位于“浏览”按钮下方。
是：
<li class="nav-item nav-dropdown">
更改为：
<li class="nav-item dropdown">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="row d-flex align-items-center" id="top-bar">
<!--Website title-->
<div class="col-auto">
<h1>My Website</h1>
</div>
<!--nav bar-->
<div class="col-auto">
<nav class="navbar navbar-expand-lg" id="nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./advanced_search.html">Advanced Search</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Browse
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="./Part01_PostList.php">Posts</a>
<a class="dropdown-item" href="./Part02_SinglePost.php?post_id=1">Images</a>
<a class="dropdown-item" href="./Part03_SingleImage.php?image_id=1">Users</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!--Utility dropdown-->
<div class="nav-dropdown mx-auto" id="utility-nav">
<i class="fa fa-cog btn btn-secondary" type="button" id="utility-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./favorites-list.php">Favorites List</a>
<a class="dropdown-item" href="#">Account</a>
<a class="dropdown-item" href="#">Register</a>
<a class="dropdown-item" href="#">Login</a>
</div>
</div>
<!--Search bar-->
<div class="col-auto ml-auto">
<form action="./Part04_Search.php" method="POST" class="form-inline my-2 my-lg-0" id="search-bar">
<input class="form-control mr-sm-2" type="text" name="title-alt" placeholder="Search" aria-label="Search" />
<button class="btn-primary" id="search-btn" type="submit">
Search
</button>
</form>
</div>
</div>