Bootstrap 4 Popper.js编辑样式属性

Question

我正在尝试编辑dropdown元素的位置，但似乎无法使其工作。我正在使用Bootstrap4和Popper.js，我只是在我的页面中添加了一个默认的下拉列表，没有任何替代样式，但它会自动将以下内容添加到下拉列表的样式属性中：

position: absolute;
transform: translate3d(4px, 90px, 0px);
top: 0px;
left: 0px;
will-change: transform;

现在，我想要更改转换后的位置，我尝试了自定义样式，并添加了“！important”，但到目前为止还没有结果。

我的trigger+dropdown：

<a href="#" class="account_nav_link" role="button" id="dropdownAccount" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <i class="account_nav_icon fab fa-accessible-icon"></i>                 
</a>

<div class="dropdown-menu dropdown_account" id="dropdownAccount-menu" aria-labelledby="dropdownAccount">
<span class="dropdown_arrow"></span>
   <div class="dropdown_wrap">
      <ul class="dropdown_nav">
         <li class="content_item"></li>
         <li class="content_item"></li>
      </ul>
   </div>
</div>

我也尝试了下面的解决方案，使用我在github上找到的JS，但也没有任何结果。有谁能帮我一下吗？

var reference = $('#dropdownAccount');
    var popper = $('#dropdownAccount-menu');
    var anotherPopper = new Popper(
        reference,
        popper,
        {
            modifiers: {
                computeStyle: {enabled: false, gpuAcceleration: false},
            },

        }
    );

Answer 1

我不确定这是否适用于你，但这是我的故事：

我也在popper.js中使用BS4。在大多数情况下，transform属性对我来说都工作得很好。然而，在屏幕宽度为478px或更低的移动视图中，它会滚动到屏幕之外一点，因为它稍微向右偏移了一点。

因此，我所做的就是检查站点代码以找到转换元素的值，这些值最初是为我的dropdown设置的：

   transform: translate3d(5px, 38px, 0px);

并在我的样式表中添加了一个媒体查询来覆盖它，同时：

.dropdown-menu {
   transform: translate3d(0px, 38px, 0px) !important;
}

也许这些内容也适用于您的样式表(显然，使用您的值将我的值更改为我的值)。我只是不想坐在那里篡改脚本，因为这是我在样式表中只需几行代码就能实现的最快解决方案。

Answer 2

您可以向tag a添加attributes data-display="static"，它不会自动将该样式属性添加到下拉菜单中。

<a href="#" data-display="static" class="account_nav_link" role="button" id="dropdownAccount" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <i class="account_nav_icon fab fa-accessible-icon"></i>                 
</a>

您可以访问https://getbootstrap.com/docs/4.5/components/dropdowns/#options了解更多详细信息。