我有一个用bootstrap制作的侧边栏，我的问题是我有一些塌陷变成另一个塌陷，并且我有一个下拉菜单，但是每个塌陷都有一个卡体，问题是该下拉菜单位于卡身，但我想在标题后面加上，我该如何修改css以进行修复？
所有折叠都是我的html代码：
<!-- Sidenav -->
<nav
class="sidenav navbar navbar-vertical fixed-left navbar-expand-xs navbar-light bg-white"
id="sidenav-main"
>
<div class="scrollbar-inner">
<!-- Brand -->
<div class="sidenav-header dropdown align-items-center">
<a
class="navbar-brand dropdown-toggle"
id="dropdownCompanies"
href="javascript:void(0)"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<img
src="assets/img/brand/logo.png"
class="navbar-brand-img"
alt="kiral"
/>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownCompanies">
<a class="dropdown-item" href="#">
<img
src="assets/img/brand/logo.png"
class="navbar-brand-img"
alt="kiral"
/>
</a>
</div>
</div>
<div class="navbar-inner">
<!-- Collapse -->
<div class="collapse navbar-collapse" id="sidenav-collapse-main"></div>
<!-- Nav items -->
<ul class="nav nav-tabs navbar-nav pl-3" role="tablist">
<li class="nav-item">
<a
class="nav-link nav-item active"
id="inicio-tab"
data-toggle="tab"
role="tab"
aria-controls="inicio"
aria-selected="false"
href="#inicio"
>
<i class="ni ni-tv-2 text-primary"></i>
<span class="nav-link-text">Inicio</span>
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="mytask-tab"
data-toggle="tab"
role="tab"
aria-controls="profile"
aria-selected="false"
href="#task"
>
<i class="far fa-check-circle text-warning"></i>
<span class="nav-link-text">Mis Tareas</span>
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="dashboard-tab"
data-toggle="tab"
role="tab"
aria-controls="profile"
aria-selected="false"
href="#dashboard"
>
<i class="far fa-chart-bar text-info"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
</ul>
<!-- Equipos -->
<div>
<h6
class="mt-3 collapsed teamsTextTitle p-0 pl-3"
data-toggle="collapse"
data-target="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample"
>
Equipos
<i class="fas fa-chevron-down ml-auto p-2 tab-arrow-title"></i>
</h6>
</div>
<div class="collapse" id="collapseExample">
<div class="card card-body pl-3 sidebarTeams col-12 px5-padding">
<div
class="pl-3 text-muted d-flex align-items-center project-options bg-colorh-gray pt-2 pb-2 mb-0"
>
<div
class="collapsed"
data-toggle="collapse"
role="button"
aria-expanded="false"
aria-controls="collapseExample"
data-target="#collapseTeam"
>
<i
class="fas p-2 fa-caret-right text-light tab-arrow-project hover-icon"
></i>
</div>
<span class="text-dark docs-normal teamTitle"> Marketing </span>
<div class="ml-auto d-flex">
<div class="btn-groups">
<i
class="fas fa-ellipsis-h dropleft dropdown-toggle p-2 hover-icon"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
></i>
<div class="dropdown-menu dropdown-menu-team">
<a
class="dropdown-item"
data-toggle="modal"
data-target="#editTeam"
>Editar detalles del equipo</a
>
</div>
</div>
<div class="btn-groups">
<i
class="fas fa-plus text-light dropleft dropdown-toggle p-2 mr-2 fs-13 hover-icon"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
></i>
<div class="dropdown-menu dropdown-menu-team">
<h6 class="dropdown-header">Crear proyecto</h6>
<a
class="dropdown-item"
data-toggle="modal"
data-target="#newproject"
>Nuevo proyecto</a
>
<div class="dropdown-divider"></div>
<a
class="dropdown-item"
data-toggle="modal"
data-target="#newmember"
>Invitar personas</a
>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapseTeam">
<div class="card card-body col-12 sidebarTeams px5-padding">
<! -- Team Card content -->
<div
class="align-items-center d-flex bg-colorh-gray project-options"
>
<div class="pl-3 pt-2 pb-2 option">
<a class="teamSelector text-dark d-flex align-items-center">
<i class="fas fa-circle text-warning pr-1 fs-9"></i>
Diseño Gráfico
</a>
</div>
<div class="btn-groups ml-auto">
<i
class="fas fa-ellipsis-h dropleft dropdown-toggle p-2 mr-2 hover-icon"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
></i>
<div class="dropdown-menu">
<a
class="dropdown-item"
data-toggle="modal"
data-target="#editproject"
>Editar Detalles</a
>
<a
class="dropdown-item"
data-toggle="modal"
data-target="#deleteproject"
>Eliminar Proyecto</a
>
</div>
</div>
</div>
<div
class="align-items-center d-flex bg-colorh-gray project-options"
>
<div class="pl-3 pt-2 pb-2 option">
<a class="teamSelector text-dark d-flex align-items-center">
<i class="fas fa-circle text-danger pr-1 fs-9"></i>
Creativos
</a>
</div>
<div class="btn-groups ml-auto">
<i
class="fas fa-ellipsis-h dropleft dropdown-toggle p-2 mr-2 hover-icon"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
></i>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Editar Detalles</a>
<a class="dropdown-item" href="#">Eliminar Proyecto</a>
</div>
</div>
</div>
</div>
</div>
<div
data-toggle="modal"
data-target="#newteam"
class="hover-icon text-center text-light"
>
<p class="fs-13">
Agregar equipo
<i class="fas fa-plus fs-13"></i>
</p>
</div>
</div>
</div>
<!-- Divider -->
<hr class="my-3" />
<!-- Heading -->
<h6 class="navbar-heading p-0 text-muted">
<span class="docs-normal pl-3">Documentación</span>
</h6>
<!-- Navigation -->
<ul class="navbar-nav mb-md-3">
<li class="nav-item">
<a
class="nav-link"
href="https://demos.creative-tim.com/argon-dashboard/docs/getting-started/overview.html"
target="_blank"
>
<i class="ni ni-spaceship"></i>
<span class="nav-link-text">Inicio Rápido</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
如何将每个按钮的标题下拉列表放下？
如果您需要信息，请询问他们，也许我不够清楚。