如何制作Bootstrap下拉菜单的垂直滚动条

Question

我正在开发 Angular 应用程序。我的下拉菜单太长了，我无法滚动，页面也结束了。这里使用Bootstrap 4.5.0. 如何在其中添加垂直滚动条

这是我的代码

<div ngbDropdown class="d-inline-block">
<button class="btn btn-secondary btn-sm dropdown-toggle" id="dropdownMap" ngbDropdownToggle>
 {{ selectedCountry}}
</button>
<div ngbDropdownMenu aria-labelledby="dropdownMap">
  <ng-container *ngFor="let country of mapData">
  <button ngbDropdownItem class="dropdown-item" (click)="mapCountry_selected(country)" >
    {{country.post}}
    </button>
  </ng-container>
</div>
</div>

我尝试过这个但不起作用

.ngbDropdownMenu
 {
   max-height: 200px;
   overflow-y: scroll;
 }
 
 .ngbDropdownItem
 {
   max-height: 200px;
   overflow-y: scroll;
 }
.ngbDropdown
{
max-height: 200px;
overflow-y: scroll;
}

Answer 1

使用以下代码修复了此问题

.dropdown-menu { max-height: 280px; overflow-y: auto; min-width: 100% !important; background-attachment: local, local, scroll, scroll; }

.dropdown-item { white-space: normal; }