解决bootstrap dropdown高度超出设备高度之后 菜单显示不全问题

先简述一下问题：
bootstrap dropdown的显示会根据你设备的高度来决定，默认会显示在下方，如果下方视图不够的话会显示到上方

然后显示到上方的话就会有个问题，设备高度不够的话， 比较靠上的选项就会显示不全。

总共有两种办法解决这个问题

1. 通过添加css样式来解决

.dropdown-menu {
	max-height: calc( 100vh - 100px );
	overflow-y: auto;
}

原理是 固定dropdown的最大高度，如果超出高度 会出现滚动条，避免出现菜单过长 显示不全问题
但是这种解决办法主要就是依靠max-height的设置了，如果设置的值不合适 某种设备下可能还是会出现问题。
注意：calc()函数, 运算符前后都需要保留一个空格

2. 组件上添加data-display=“static” 属性（ Bootstrap 4 ）

<div class="dropdown">
  <button type="button" id="dropdown-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
    select: 
  </button>
  <div  aria-labelledby="dropdown-menu">
    <a href="#">menu1</a>
    <a href="#">menu2</a>
    <a href="#">menu3</a>
  </div>
</div>

原理是禁用Popper.js ，是menu只显示在下方（Bootstrap 的下拉菜单使用 Popper.js 来定位下拉菜单）