Bootstrap 4 下拉菜单 translate3d() 位置不正确
Posted
技术标签:
【中文标题】Bootstrap 4 下拉菜单 translate3d() 位置不正确【英文标题】:Bootstrap 4 dropdown menu translate3d() incorrect position 【发布时间】:2020-06-22 04:05:00 【问题描述】:有多个 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 列,我遇到的问题是下拉菜单在第一列和最后一列中的位置:
1st: translate3d(5px, -244px, 0px);
5th: translate3d(-5px, -244px, 0px);
向左/向右移动了 5px,我不知道是什么原因造成的。如果我将列数减少到 4,我仍然会在第一列/最后一列得到相同的转变。
有没有办法强制计算的 translate3d(5px, -244px, 0px) 中的第一个数字始终为 0?我尝试了 transform: translateX(0),但它覆盖了整个 translate3d() 设置,而不仅仅是 X
任何想法
【问题讨论】:
【参考方案1】:我发现了我的问题所在。 Bootstrap 使用 Popper 调用许多 css 修饰符以确保 GUI 看起来不错。在我的情况下导致该翻译的修饰符是preventOverflow
。我相信你应该确保你的 body
和 html
元素(甚至可能是其他父元素)占用了所有需要的空间。
我将 html
和 body
的高度设置为 100%,在移动屏幕上它只占用 100% 的视口,小于页面的实际高度,所以 Popper.js 认为我溢出了.
【讨论】:
以上是关于Bootstrap 4 下拉菜单 translate3d() 位置不正确的主要内容,如果未能解决你的问题,请参考以下文章