如何使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;
}

- R15

---

请标记所有相关技术。看起来你在使用AngularJS或者类似的东西。同时标记你所使用的Bootstrap版本。 - isherwood

你可以使用 overflow-y:auto 或 overflow-y:scroll。 - Rayees AC

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; }

- R15

Answer 2

对于使用Bootstrap 5的未来读者，下拉菜单的标记已经略有改变，现在使用data-bs-属性。您可以通过设置max-height和overflow使下拉菜单可滚动。

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

Demo

- Carol Skelly

---

这对我来说可行，使用ngb 1.1和bootstrap 4（以及angular 5.2）。 - Guntram

Answer 3

您可以在CSS文件中使用"overflow"属性，或直接在样式中操作该属性。

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

如果下拉菜单过宽，请选择您想要看到的overflow-x行为。

可能的行为包括永久滚动条或剪切超出元素边缘的内容。

编辑：另外，您对div分配类的方式不是有效的HTML，因此请尝试将您的代码更改为以下内容（您的CSS文件中的类名必须在您希望受影响的div的类标签中）：

<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>

- Mr_Menschenrechte

---

我更新了我的答案，并附上了可运行的代码，希望能有所帮助。 - Mr_Menschenrechte

在放置您的代码后，出现了错误 NullInjectorError: No provider for NgbDropdown!。 - R15