【发布时间】：2021-07-12 02:41:11
【问题描述】：
我使用 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>
【问题讨论】：
标签： html css bootstrap-4 navbar