我正在尝试编辑下拉元素的位置,但我似乎无法让它工作。我正在使用带有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>
我还尝试使用JS在github上找到的以下解决方案,但也没有任何结果。有人可以帮我这个吗?
var reference = $('#dropdownAccount');
var popper = $('#dropdownAccount-menu');
var anotherPopper = new Popper(
reference,
popper,
{
modifiers: {
computeStyle: {enabled: false, gpuAcceleration: false},
},
}
);
答案 0 :(得分:0)
我不确定这是否适合你,但这是我的故事:
我也使用BS4和popper.js。在大多数情况下,transform属性对我来说效果很好。但是,在屏幕宽度为478像素或更低的移动视图中,它在屏幕上滚动了一点,因为它向右略微偏移。
所以我所做的就是检查站点代码,找到最初为我的下拉列表设置的转换元素值:
transform: translate3d(5px, 38px, 0px);
并在我的样式表中添加了一个媒体查询以覆盖它:
.dropdown-menu {
transform: translate3d(0px, 38px, 0px) !important;
}
也许在这些方面的某些内容对你来说也适用于你的样式表(显然用你的值改变了我自己的值)。我只是不想坐在那里篡改脚本,这是我在样式表中用最简单的代码来实现最快的解决方案。
答案 1 :(得分:0)
您可以将属性 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 了解更多详情。