我有一个默认的 Bootstrap 5 导航栏，但是当我尝试在右侧放置一个下拉菜单时，下拉项目列表会从右侧屏幕中消失。这https://ibb.co/jf3GHfK https://ibb.co/jf3GHfK.
我已经尝试过其他人给出的解决方案，例如这里：Bootstrap 4：下拉菜单消失在屏幕右侧 https://stackoverflow.com/questions/42046287/bootstrap-4-dropdown-menu-is-going-off-to-the-right-of-the-screen
和这里：Bootstrap：下拉菜单相对于导航栏项目的位置 https://stackoverflow.com/questions/17904862/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>
<!-- ################################ -->
Regards.
确保您正在阅读适合您所使用版本的正确文档：
https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment
你会看到v5使用.dropdown-menu-end右对齐菜单。
<link href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<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">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
John Doe
</a>
<div class="dropdown-menu dropdown-menu-end" 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>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
