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.&nbsp;我相信您应该确保您的body和html元素（甚至可能是其他父母）占用了所有所需的空间。html我将和的高度设置body为 100%，在移动设备屏幕上，它只占用 100% 的视口，这小于页面的实际高度，因此 Popper.js 认为我发生了溢出。