Question

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

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

预先感谢

Answer 1

如果要禁用，则必须仅对CSS使用一些负面技巧，需要编写一些CSS来覆盖CSS，因此，可以使用transform unset like

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

Answer 2

如果我正确理解您的查询，则表示Bootstrap 4下拉列表的大小超出了您的期望。要解决此问题，您可以向dropdown-menu

添加溢出

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

Answer 3

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

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

Answer 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>

如何禁用Bootstrap 4.1的自动位置

4 个答案: