Bootstrap 5:下拉菜单从屏幕右侧消失 [英] Bootstrap 5: Dropdown menu go out off to the right of the screen

问题描述

我有一个默认的引导程序 5 导航栏，但是当我尝试在右侧放置下拉列表时，下拉项目列表会从右侧的屏幕中消失.这个https://ibb.co/jf3GHfK.

我已经尝试过提供给其他人的解决方案，例如这里:Bootstrap 4:下拉菜单是转到屏幕右侧

这里:Bootstrap:下拉菜单相对于导航栏项目的位置

(我尝试过下拉菜单右拉或右拉，但没有任何效果对我有用......)

这是行不通的:

<li class="nav-item dropdown">编辑设置<a class="dropdown-item";href=#">编辑个人资料页面</a><a class="dropdown-item";href=#">显示个人资料页面 </a><a class="dropdown-item";href=#">创建个人资料页面

这是我的导航栏代码:

<div class="container-fluid"><a class="navbar-brand";href=#">博客</a><按钮class =导航栏切换器"类型=按钮"data-bs-toggle=折叠"data-bs-target =#navbarSupportedContent"；aria-controls="navbarSupportedContent";aria-expanded="false";aria-label="切换导航";><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse";id="navbarSupportedContent"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item dropdown"><li><a class="dropdown-item";href=#">Cat1</a><li><a class="dropdown-item";href=#">Cat2</a><li><a class="dropdown-item";href=#">Cat3</a><li class="nav-item"><a class="nav-link";href=#">添加帖子</a><li class="nav-item"><a class="nav-link";href=#">添加类别</a><li class="nav-item"><a class="nav-link";href=#">注销</a><li class="nav-item"><a class="nav-link";href=#">登录</a>

<!-- 这就是工作不正常的地方--><ul class="navbar-nav ml-auto"><li class="nav-item dropdown">编辑设置<a class="dropdown-item";href=#">编辑个人资料页面</a><a class="dropdown-item";href=#">显示个人资料页面 </a><a class="dropdown-item";href=#">创建个人资料页面

<!-- ############################## -->

问候.

解决方案

请确保您正在阅读适用于您所使用版本的正确文档:
https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-对齐
您将看到 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="#">博客</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span><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">类别</a><ul class="下拉菜单" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Cat1</a><li><a class="dropdown-item" href="#">Cat2</a><li><a class="dropdown-item" href="#">Cat3</a><li class="nav-item"><a class="nav-link" href="#">添加帖子</a><li class="nav-item"><a class="nav-link" href="#">添加类别</a><li class="nav-item"><a class="nav-link" href="#">注销</a><li class="nav-item"><a class="nav-link" href="#">登录</a>

<!-- 这就是工作不正常的地方--><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">约翰·多伊</a><div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown"><a class="dropdown-item dropdown" href="#">编辑设置<a class="dropdown-item" href="#">编辑个人资料页面</a><a class="dropdown-item" href="#">显示个人资料页面 </a><a class="dropdown-item" href="#">创建个人资料页面

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8Qj9S0G0gz="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8Qj9SG0Gz="匿名"></script>