如何制作 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

您可以使用 css-file 中的 "overflow" attribute 或直接操作样式中的属性。

如果下拉菜单在垂直方向上太长，请选择您希望看到的 overflow-y 行为

如果下拉列表太宽，请选择您希望看到的 overflow-x 行为。

可能的行为包括，例如延伸到元素边缘的永久滚动条或内容剪辑。

编辑： 此外，您将 classes 分配给 divs 是无效的 html，因此请尝试更改您的代码到以下内容（css 文件中的 class 名称必须位于要受影响的 div 的 class 标记中：

<div class="ngbDropdown d-inline-block">
<button class="btn btn-secondary btn-sm dropdown-toggle" 
id="dropdownMap" ngbDropdownToggle>
 {{ selectedCountry}}
</button>
<div class="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>

Answer 2

使用以下代码解决了这个问题

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

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

Answer 3

对于使用 Bootstrap 5 的未来读者，下拉标记略有变化，因为它现在使用 data-bs- 属性。您可以通过设置 max-height 和 overflow..

使下拉列表可滚动

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

Demo

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

How to make Bootstrap dropdown's vertical scrollbar

html

css

twitter-bootstrap

ng-bootstrap

angular