我正在使用Bootstrap 5创建一个侧边栏，并使用各自的Bootstrap类使用“下拉”和“下拉”菜单。
我的问题是当下拉菜单打开时，下拉菜单的位置不正确。而不是立即在菜单图标的右边，有一个很大的差距（似乎是宽度的大小）。当下拉菜单关闭时，它工作正常。
见下面两张图片。第一个显示了正确的对齐方式，它紧挨着右边。第二个显示了下拉菜单打开时的问题和大差距。
代码：
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
<link xhref="designs/css/style.css" rel="stylesheet" />
<style>
/* added this so that the dropdown menu would stay on top of content in the main area. */
.not-bs-sidebar {
z-index: 9999;
}
/* added so the main area fills the page width. */
.not-bs-main {
flex: 1;
}
/* set the size of the sidebar. */
.not-bs-sidebar.active {
width: 80px;
}
/* the rest is optional basic styling. */
.not-bs-sidebar .nav-link {
color: #FFFFFF;
padding-left: 0px;
}
.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/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
</body>
</html>编辑
出现这种情况的原因似乎是因为当菜单打开时，导航中所有“li”标签的宽度都在扩大。因此，下拉菜单在展开的“li”的边缘打开。我又添加了两张在“li”标签周围有红色边框的图片来演示。
2条答案
按热度按时间ckocjqey1#
从
到
z9ju0rcb2#
我找到了两个解决问题的方法。
方案一：
第一个解决方案是为有问题的“下拉”菜单项设置“li”标记的宽度。在这种情况下，我将宽度设置为所需的宽度，如下所示。
验证码：
结果：
方案二：
第二个解决方案是更改与出现问题的“dropend”菜单项一起使用的 Bootstrap 类。使用引导类“btn-group”代替引导类“nav-link”。有趣的是，关联的“li”标签的宽度仍然会拉伸，但是“btn-group”类忽略了它。如果你调查这两个类之间的差异，我想你会找出差异的原因。但现在...这个可以用。
验证码：
结果：