如何制作 Bootstrap 下拉菜单的垂直滚动条
Posted
技术标签:
【中文标题】如何制作 Bootstrap 下拉菜单的垂直滚动条【英文标题】:How to make Bootstrap dropdown's vertical scrollbar 【发布时间】:2021-01-07 18:40:54 【问题描述】:我正在开发 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;
【问题讨论】:
请标记所有相关技术。看起来你在这里使用 AngularJS 或其他东西。同时标记您的 Bootstrap 版本。 你可以使用overflow-y:auto
或overflow-y:scroll
【参考方案1】:
使用下面的代码解决了这个问题
.dropdown-menu max-height: 280px; overflow-y: auto; min-width: 100% !important; background-attachment: local, local, scroll, scroll;
.dropdown-item white-space: normal;
【讨论】:
【参考方案2】:您可以使用 css 文件中的 "overflow" attribute 或直接操作样式中的属性。
如果下拉菜单在垂直方向上过长,请选择您希望看到的 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>
【讨论】:
我用工作代码更新了我的答案,希望对您有所帮助 在输入代码后出现错误NullInjectorError: No provider for NgbDropdown!
【参考方案3】:
对于使用 Bootstrap 5 的未来读者,下拉标记略有变化,因为它现在使用 data-bs-
属性。您可以通过设置 max-height
和 overflow
.. 来使下拉列表可滚动。
.dropdown-menu
max-height: 280px;
overflow-y: auto;
Demo
【讨论】:
以上是关于如何制作 Bootstrap 下拉菜单的垂直滚动条的主要内容,如果未能解决你的问题,请参考以下文章