Jquery 如何禁用bootstrap 4.1的自动定位

我当前的下拉列表很大。见下图

如何解决这个问题？我正在考虑使用适当的JS来重新定位菜单。 请帮忙。如何禁用自动定位

下面是我的代码示例

<div class="btn-group">
                <button type="button" class="btn btn-danger dropdown-toggle"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Action
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </div>

---

提前感谢

如果我正确理解您的查询，您的Bootstrap 4下拉列表比您想要的要大。要解决此问题，可以在

下拉菜单中添加溢出

<div class="btn-group">
                <button type="button" class="btn btn-danger dropdown-toggle"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Action
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </div>

.menu-scroll {
  overflow-y: scroll;
  max-height: 200px;
}

例如，在下拉菜单旁边添加一个类。菜单滚动，然后设置自定义css：


将此行放入js文件。

Popper.Defaults.modifiers.preventOverflow = { enabled: false };

用于禁用正确的js。

Popper.Defaults.modifiers.preventOverflow = { enabled: false };

并在下拉列表中添加一些参数（data flip=“false”，data boundary=“window”），如下所示

          <a data-toggle="dropdown" href="#" data-flip="false" data-boundary="window" aria-expanded="true"  >
                <i class="icon-menu "></i>
                <span class="change-text">Select a Category</span>
            </a> 

如果你想禁用，你必须对css使用一些负面技巧。你需要编写一些css来覆盖css。因此，你可以像使用transform unset一样使用

.dropdown-menu.show {
  transform: unset !important;
}

你在这里的目的是什么？要缩短下拉列表？您的意思是，高度太大？请根据屏幕大小更改内联样式。我想停止或禁用它。element.style{left:0px；position:absolute；transform:translate3d（16px，-258px，0px）；top:0px；will change:transform；}如果我们用高度固定菜单，那么它的子菜单将被隐藏，这不是解决方案，元素样式会根据屏幕大小而变化，我不知道为什么。这里是styleelement.style{left:0px；position:absolute；transform:translate3d（16px，-258px，0px）；top:0px；will change:transform；}您应该将overflow-x:hidden放入，并将这些更改只放在一个元素上，不对子元素进行更改。我想禁用正确的js自动定位。你能告诉我怎么做吗？这不是正确的解决办法。你能告诉我如何在下拉菜单中禁用正确的js吗