gpt4 book ai didi

html - Bootstrap 5 : Dropdown menu go out off to the right of the screen

转载 作者:行者123 更新时间:2023-12-04 11:54:59 27 4
gpt4 key购买 nike

我有一个默认的 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>
<!-- ################################ -->


问候。

最佳答案

确保您正在阅读所用版本的正确文档:
https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment
你会看到 v5 使用 .dropdown-menu-end对于右对齐菜单。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/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/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

关于html - Bootstrap 5 : Dropdown menu go out off to the right of the screen,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66214822/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com