我一直试图将一个下拉按钮放入一个链接列表组项中，但是每当我单击链接组项内部的按钮时，它都不会显示下拉菜单。
我在其他问题中看到的唯一解决方案是将更改为，但我需要它是一个链表。
我如何保持它的链接，因为它引用的是标签内容，但也有可能有一个按钮，显示一个下拉菜单在它？
这就是我目前所拥有的:
null
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="list-group rounded-0" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">
<div class="d-flex justify-content-between text-nowrap">
<h5 class="mb-1">Text</h5>
<small>2 days ago</small>
</div>
<p class="mb-1 mr-5">Text</p>
<div class="d-flex justify-content-between text-nowrap">
<small>Text</small>
<div class="dropdown">
<button class="btn btn-warning btn-sm" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">B</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">A</a></li>
<li><a class="dropdown-item" href="#">B</a></li>
<li><a class="dropdown-item" href="#">C</a></li>
<li><a class="dropdown-item" href="#">D</a></li>
<li><a class="dropdown-item" href="#">E</a></li>
</ul>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">
<div class="d-flex justify-content-between text-nowrap">
<h5 class="mb-1">Text</h5>
<small>3 days ago</small>
</div>
<p class="mb-1 mr-5">Text</p>
<div class="d-flex justify-content-between text-nowrap">
<small>Text</small>
<span class="btn btn-danger risk btn-sm">?</span>
</div>
</a>
</div>null
null
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<button class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="home">Home
<div class="dropdown">
<a class="btn btn-secondary" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
A
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">A</a></li>
<li><a class="dropdown-item" href="#">B</a></li>
</ul>
</div>
</button>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">test</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>