Bootstrap 4下拉菜单translate3d()位置不正确

Question

有多个 bootstrap 4.4.1 下拉菜单，每个菜单都在一个 col 中，除了计算的位置之外，该菜单运行良好。HTML 列示例<div class="container">  <div class="row">    <div class="col">      <div class="dropdown">        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="snl-68778" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="0"><div class="btn-txt">TEXT</div><div class="chevron-wrapper"><svg class="chevron"><use xlink:href="/img/chevron-white.svg#chevron"></use></svg></div></a>        <div class="dropdown-menu" aria-labelledby="snl-68778" style="">          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 1</a>          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 2</a>          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 3</a>          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 4</a>          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 5</a>        </div>      </div>    </div>   // more columns here  </div></div>CSS：.btn,.dropdown-menu {    width: 100%;}.btn{  display: inline-block;  padding: 8px 15px;  border: none;  background: #E5392A;  color: #fff;  text-align: center;  font-size: 12px;  font-weight: 800;  letter-spacing: 1.5px;  line-height: 18px;  text-transform: uppercase;}.dropdown-menu{  margin-top: 0;  border: 0;  padding: 0 10px;  background-color: #211D17;}.chevron-wrapper {  vertical-align: middle;  display: inline-block;  width: 36px;  height: 26px;  border-left: 1px solid #fff;  margin-left: calc(100% - 115px);  padding-left: 10px;}.dropdown.show .chevron {  transform: rotate(90deg);}.chevron {  display: inline-block;  width: 26px;  height: 26px;}我设置了 5 列，我遇到的问题是下拉菜单在第一列和最后一列中的位置：第一：translate3d(5px, -244px, 0px);第五：translate3d(-5px,-244px,0px);左/右有 5px 的偏移，我不知道是什么原因造成的。如果我将列数减少到 4，我仍然会在第一列/最后一列上得到相同的偏移。有没有办法强制计算的translate3d(5px, -244px, 0px) 中的第一个数字始终为0？我尝试了转换：translateX（0），但这覆盖了整个translate3d（）设置，而不仅仅是X有任何想法吗

Answer 1

我发现我的情况出了什么错误。Bootstrap 使用 Popper 调用许多 css 修饰符来确保 GUI 看起来不错。在我的例子中导致翻译的修饰符是preventOverflow. 我相信您应该确保您的body和html元素（甚至可能是其他父母）占用了所有所需的空间。

html我将和的高度设置body为 100%，在移动设备屏幕上，它只占用 100% 的视口，这小于页面的实际高度，因此 Popper.js 认为我发生了溢出。