【发布时间】：2021-05-18 17:46:40
【问题描述】：
我有一个默认的 bootstrap 5 导航栏，但是当我尝试在右侧放置一个下拉菜单时，下拉项目列表会从右侧的屏幕中消失。这个https://ibb.co/jf3GHfK。
我已经尝试过提供给其他人的解决方案，例如这里： Bootstrap 4: Dropdown menu is going off to the right of the screen
这里： Bootstrap: Position of dropdown menu relative to navbar item
（我尝试过下拉菜单右或拉右，但没有任何工作对我有用....）
这是不好的地方：
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Username
</a>
<div
class="dropdown-menu dropdown-menu-right"
aria-labelledby="navbarDropdown"
>
<a class="dropdown-item dropdown" href="#"> Edit settings </a>
<a class="dropdown-item" href="#"> Edit profile page </a>
<a class="dropdown-item" href="#"> Show profile page </a>
<a class="dropdown-item" href="#"> Create profile page </a>
</div>
</li>
</ul>
这是我的导航栏代码：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Blog</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Categories
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item" href="#">Cat1</a>
</li>
<li>
<a class="dropdown-item" href="#">Cat2</a>
</li>
<li>
<a class="dropdown-item" href="#">Cat3</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Logout</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign in</a>
</li>
</ul>
</div>
<!-- This is what is not working well -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
{{ user.first_name }} {{ user.last_name }}
</a>
<div
class="dropdown-menu dropdown-menu-right"
aria-labelledby="navbarDropdown"
>
<a class="dropdown-item dropdown" href="#"> Edit settings </a>
<a class="dropdown-item" href="#"> Edit profile page </a>
<a class="dropdown-item" href="#"> Show profile page </a>
<a class="dropdown-item" href="#"> Create profile page </a>
</div>
</li>
</ul>
<!-- ################################ -->
问候。
【问题讨论】：
标签： html css bootstrap-4 bootstrap-5