Question

具有多个bootstrap 4.4.1下拉菜单，每个菜单项位于col内，除了计算出的位置外，它们均能正常工作。 HTML col示例

<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列，而我的问题是下拉菜单在第一列和最后一列中的位置：

第1次：translate3d（5px，-244px，0px）;

第5个：translate3d（-5px，-244px，0px）;

向左/向右移动了5px，我不知道是什么原因造成的。如果我将cols的数量减少到4，则我在第一列/最后一列上的移位仍然相同。

是否有一种方法可以强制在计算出的translate3d（5px，-244px，0px）中仅第一个数字始终为0？我尝试了transform：translateX（0），但是它覆盖了整个translation3d（）设置，而不仅仅是X

任何想法

Answer 1

我发现我的情况是什么错误。 Bootstrap使用Popper来调用许多CSS修饰符，以确保GUI看起来不错。在我的情况下，引起该翻译的修饰语是INFO org.apache.flink.streaming.api.functions.source.MessageAcknowledgingSourceBase - No state to restore for the RMQSource.。我相信您应该确保您的preventOverflow和body元素（甚至其他父母）可以占用所有必需的空间。

我将html和html的高度设置为100％，在移动屏幕上，它仅占用100％的视口，该视口小于页面的实际高度，因此Popper.js认为我溢出了。

Bootstrap 4下拉菜单translate3d（）位置错误

1 个答案: