Bootstrap 4 Popper.js 编辑样式属性

Question

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

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

现在我想改变转换后的位置，我尝试了使用自定义样式并添加“！important”，但是迄今为止没有结果。

我的触发器+下拉菜单：

<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},
            },

        }
    );

- Mikelo

---

你应该在 https://dev59.com/GlYN5IYBdhLWcg3wlI3G#51981931 上检查答案。 - jnbn

Answer 1

我不确定这对你是否有用，但这是我的故事：

我也使用BS4和popper.js。在大多数情况下，transform属性对我来说效果很好。然而，在移动视图下，屏幕宽度为478像素或以下时，它会稍微向右偏移，导致滚动出屏幕。

所以我所做的就是检查网站代码，找到最初为我的下拉菜单设置的变换元素值：

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

我在样式表中添加了一个媒体查询来覆盖它，以及：

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

也许在您的样式表中，以下类似的内容对您也有用（显然，使用您自己的值从我的值更改）。我只是不想在这个脚本上纠结，因为这是我在样式表中实现的最快解决方案，只需要几行代码即可。

- Nancy

---

默认的5像素填充来自于这里：https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.padding您可以使用修饰符 modifiers.preventOverflow.padding = 0 来删除它。 - cchambers

Answer 2

您可以在标签a中添加属性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了解更多细节。

- Cloneable