如何在引导下拉菜单中制作滚动条？答案

【问题标题】：How to make a scrollbar in bootstrap dropdown?如何在引导下拉菜单中制作滚动条？
【发布时间】：2020-03-27 21:21:51
【问题描述】：

如何在 bootstrap 4 下拉选择中创建滚动条。在我的情况下，如果文件太多，那么下拉菜单将不会完全加载。因此，我计划修复单击下拉菜单时仅显示 5 个文件并具有滚动条的问题。

HTML

<div class="pd-ltr-20 customscroll customscroll-10-p height-auto xs-pd-20-10">
    <div class="min-height-200px">
        <div class="mb-30">
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <small class="form-text text-muted">Select ES Value</small>
                        <div class="custom-file">
                            <select class="font-14 selectpicker form-control" data-width="100%">
                                <option value="">- ES VALUE -</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

您似乎没有使用 Bootstrap 下拉菜单

标签： html css drop-down-menu bootstrap-4

【解决方案1】：

给<select> 标记一个高度并为其添加溢出：自动。

【讨论】：

【解决方案2】：

您似乎正在使用 Bootstrap 4 Selectpicker 插件。在这种情况下，下拉菜单会自动调整到视口高度。要覆盖，请将自定义类添加到选择 (mh)，然后使用 !important... 设置 max-height...

/* to set custom max height */
.mh .dropdown-menu {
    max-height: 100px;
}

<select class="selectpicker mh" data-live-search="true">
     <option data-tokens="">Custom max height using CSS</option>
     <option">More...</option>
     <option">More...</option>
     <option">More...</option>
     <option">More...</option>
</select>

Demo

【讨论】：

是的，我正在使用 selectpicker 插件，但是，您上面的解决方案不起作用。还有其他想法吗？我在我的 CSS 中创建了 .mh 类并添加到 HTML 中。我没有使用数据令牌。

【解决方案3】：

将您的列表放入 DIV 标记中，并将 DIV 样式设置为 overflow:auto 并将 DIV 的高度设置为固定高度。

<select name='menu' class="myDropDown">
  <option value='1'>first item</option>
  <option value='2'>second item</option>
  <option value='3'>third item</option>
  <option value='4'>fourth item</option>
  <option value='5'>fifth item</option>
  <option>........
  <option>........
  //I have many options.....
</select>

<style>
.myDropDown
{
   height: 50px;
   overflow: auto;
}
</style>

【讨论】：

【解决方案4】：

给<option>标签高度和溢出。

option{
  height: 50px;
  overflow: auto;
}

<select>
  <option value="">- ES VALUE -</option>
  <option value="">- 1 -</option>
  <option value="">- 2 -</option>
  <option value="">- 3 -</option>
  <option value="">- 4 -</option>
  <option value="">- 5 -</option>
  <option value="">- 6 -</option>
  <option value="">- 7 -</option>
  <option value="">- 8 -</option>               
  <option value="">- 9 -</option>               
  <option value="">- 10 -</option>               
  <option value="">- 11 -</option> 
  <option value="">- 12 -</option>
  <option value="">- 13 -</option>
  <option value="">- 14 -</option>
  <option value="">- 15 -</option>
  <option value="">- 16 -</option>
  <option value="">- 17 -</option>
  <option value="">- 18 -</option>
  <option value="">- 19 -</option>
  <option value="">- 20 -</option>
  <option value="">- 21 -</option>
  <option value="">- 22 -</option>
  <option value="">- 23 -</option>
  <option value="">- 24 -</option>
  <option value="">- 25 -</option>
</select>

【讨论】：