Bootstrap中Dropdown展开时Dropend菜单定位异常问题求助

问题现象 #

使用Bootstrap 5构建侧边栏时，同时用到Dropdown和Dropend组件，出现以下异常：

• 当Dropdown菜单展开时，Dropend菜单的定位出现偏差，与对应图标之间有明显间隙，间隙宽度和Dropdown菜单宽度相近
• 关闭Dropdown菜单后，Dropend菜单显示恢复正常

问题根源 #

Dropdown菜单展开时，会撑开导航列表中所有<li>标签的宽度，而Dropend菜单是基于父级<li>的边缘进行定位的，因此导致了偏移问题。

解决方案 #

通过给导航项设置固定宽度，避免被Dropdown菜单撑开，同时调整Dropend菜单的偏移量来修正定位：

1. 给.nav-item添加固定宽度，匹配侧边栏的宽度（80px），确保宽度不会被内部元素影响
2. 调整Dropend菜单的margin-left，修正偏移位置

修改后的CSS代码 #

/* 让下拉菜单在主内容上方显示 */
.not-bs-sidebar {
    z-index: 9999; 
}
/* 让主内容区域填满页面宽度 */
.not-bs-main {
    flex: 1; 
}
/* 设置侧边栏宽度 */
.not-bs-sidebar.active {
    width: 80px; 
}
/* 新增：给导航项设置固定宽度，避免被Dropdown菜单撑开 */
.nav-item {
    width: 80px;
}
/* 新增：调整Dropend菜单的偏移，修正定位位置 */
.dropend .dropdown-menu {
    margin-left: -1rem;
}
/* 基础样式 */
.not-bs-sidebar .nav-link {
    color: #FFFFFF;
    padding-left: 0px; 
    text-align: center; /* 可选：让图标居中，视觉更统一 */
}
.not-bs-sidebar.active .not-bs-dropdown-menu {
    background-color: white; 
    border: 1px solid #CCCCCC;
}
.not-bs-sidebar.active .not-bs-dropdown-menu a {
    color: black;
}

完整修改后的页面代码 #

<!doctype html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>My Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
    <link href="designs/css/style.css" rel="stylesheet" />
    <style>
        /* 让下拉菜单在主内容上方显示 */
        .not-bs-sidebar {
            z-index: 9999; 
        }
        /* 让主内容区域填满页面宽度 */
        .not-bs-main {
            flex: 1; 
        }
        /* 设置侧边栏宽度 */
        .not-bs-sidebar.active {
            width: 80px; 
        }
        /* 新增：给导航项设置固定宽度，避免被Dropdown菜单撑开 */
        .nav-item {
            width: 80px;
        }
        /* 新增：调整Dropend菜单的偏移，修正定位位置 */
        .dropend .dropdown-menu {
            margin-left: -1rem;
        }
        /* 基础样式 */
        .not-bs-sidebar .nav-link {
            color: #FFFFFF;
            padding-left: 0px; 
            text-align: center; /* 可选：让图标居中，视觉更统一 */
        }
        .not-bs-sidebar.active .not-bs-dropdown-menu {
            background-color: white; 
            border: 1px solid #CCCCCC;
        }
        .not-bs-sidebar.active .not-bs-dropdown-menu a {
            color: black;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server" class="container-fluid">
        <div class="row">
            <div class="col-md-2 bg-primary not-bs-sidebar active" id="sidebar">
                <div class="not-bs-sidebar-frame d-flex flex-column flex-shrink-0 p-3">
                    <div class="not-bs-sidebar-nav">
                        <ul class="nav nav-pills flex-column mb-auto">
                            <li class="nav-item">
                                <a href="default.aspx" class="nav-link"><i class="bi bi-house"></i></a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link"><i class="bi bi-speedometer2"></i></a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="collapse" data-bs-target="#dropdown-example" role="button"><i class="bi bi-table"></i></a>
                                <div class="collapse not-bs-dropdown-menu" id="dropdown-example">
                                    <ul class="list-unstyled">
                                        <li><a class="dropdown-item" href="#">Action</a></li>
                                        <li><a class="dropdown-item" href="#">Some other action here</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link"><i class="bi bi-grid"></i></a>
                            </li>
                            <li class="nav-item dropend">
                                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"><i class="bi bi-table"></i></a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-10 not-bs-main" id="main">
                <div class="row not-bs-body">
                    <div class="col">
                        <div class="bg-body-tertiary border rounded p-3">
                            <h2>Page Conent</h2>
                            <div style="height: 400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
</body>

</html>

内容的提问来源于stack exchange，提问作者ptownbro