如何禁用引导程序 4.1 的自动定位答案

【问题标题】：how to disable auto position of bootstrap 4.1如何禁用引导程序 4.1 的自动定位
【发布时间】：2018-06-22 12:03:30
【问题描述】：

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

如何解决这个问题？我正在考虑使用适当的 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>

注意：当我滚动页面时，下拉菜单上会应用内联 css，并将 css 属性更改为屏幕滚动。我该如何解决这个问题？

element.style {
    left: 0px;
    position: absolute;
    transform: translate3d(16px, -258px, 0px);
    top: 0px;
    will-change: transform;
}

提前致谢

【问题讨论】：

你在这里的目的是什么？有一个更短的下拉列表？
你的意思是，高度太大了？
正确的js根据屏幕大小改变内联样式。我想停止或禁用它。 element.style { 左：0px;位置：绝对；变换：translate3d（16px，-258px，0px）；顶部：0px； will-change：变换； }

标签： jquery html css twitter-bootstrap bootstrap-4

【解决方案1】：

如果你想禁用，你必须使用一些只有css的负面技巧。你需要写一些css来覆盖css。所以，你可以使用transform unset like

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

【讨论】：

【解决方案2】：

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

中添加溢出

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

【讨论】：

不是正确的解决方案。你能告诉我如何在下拉菜单中禁用正确的 js

【解决方案3】：

在下拉菜单旁边添加一个类，例如.menu-scrolling然后设置自定义css：

.menu-scrolling {
          min-height: 1oopx!important; /*Your value */
          max-height: 250px!important; /*Your value*/
          overflow-y: auto!important;
        }

【讨论】：

它不是解决方案imgur.com/a/eIOCbHX 如果我们将菜单固定为高度，那么它的子菜单将被隐藏，
元素样式会根据屏幕大小而变化，我不知道为什么。这是风格
element.style { 左：0px;位置：绝对；变换：translate3d（16px，-258px，0px）；顶部：0px； will-change：变换； }
您应该放置overflow-x:hidden，并将这些更改只放在一个元素上，不要放在子元素上。
我想禁用正确的 js 自动定位。你能告诉我怎么做吗？

【解决方案4】：

将此行放入您的 js 文件中。

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

用于禁用正确的 js。

并像这样在下拉列表中添加一些参数(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>

【讨论】：