Bootstrap 4 Popper.js 编辑样式属性答案

【问题标题】：Bootstrap 4 Popper.js edit style attributeBootstrap 4 Popper.js 编辑样式属性
【发布时间】：2018-03-12 21:11:33
【问题描述】：

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

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

        }
    );

【问题讨论】：

你应该在stackoverflow.com/a/51981931/95829上查看答案

标签： html bootstrap-4 popper.js

【解决方案1】：

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

我也将 BS4 与 popper.js 一起使用。在大多数情况下，transform 属性对我来说效果很好。但是，在屏幕宽度为 478 像素或以下的移动视图中，它会稍微滚出屏幕，因为它稍微向右偏移。

所以我所做的只是检查站点代码以找到最初为我的下拉菜单设置的转换元素值：

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

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

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

也许在你的样式表中，这些方面的东西也对你有用（显然，用你的值改变我自己的值）。我只是不想坐在那里篡改脚本，因为这是我用几行代码在我的样式表中实现的最快解决方案。

【讨论】：

默认的 5px 内边距来自于此：popper.js.org/… 可以使用修饰符将其移除：modifiers.preventOverflow.padding = 0

【解决方案2】：

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

<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了解更多详情。

【讨论】：