Question

我正在使用Bootstrap 4下拉菜单，大约有18个下拉项目。由于高度太高，popper.js会自动将下拉列表从其原始位置移动到屏幕顶部。我该如何防止这种情况？我总是希望下拉菜单显示在切换它的按钮下方。感谢

按要求发布代码 - （我使用C＃，但代码应传达我希望的观点）

y year(s) m month(s)

Answer 1

Bootstrap 4.1

有一个新的＆＃34;显示＆＃34;禁用popper.js下拉定位的选项。使用data-display="static"与prevent popper.js from dynamically changing the dropdown position ...

Bootstrap 4.0

popper.js和定位存在一些问题。

我发现解决方案是position-relative .dropdown，并在下拉切换中将其设置为data-boundary=""选项： https://www.codeply.com/go/zZJwAuwC5s

  <div class="dropdown position-relative" id="dd">
        <button type="button" data-boundary="dd" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Dropdown
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            ...
        </div>
   </div>

boundary设置为下拉菜单的id。详细了解data-boundary。

<小时/> 相关问题：
Bootstrap 4: Why popover inside scrollable dropdown doesn't show?
Scrolling a dropdown in a modal in Bootstrap4

Answer 2

ZimSystems几乎在Bootstrap 4.1中得到了它。要在打开时禁用下拉列表更改方向，也称为。它的x-placement =＆＃34;底端＆＃34;，你应该使用＆＃34;翻转＆＃34;选项，而不是＆＃34;显示＆＃34;选项。

显示静态会完全禁用定位，而翻转只会禁用实时检查，当您向屏幕顶部滚动时，可以将下拉菜单翻转过来。

Answer 3

我在Bootstrap 4.3.1中通过向下拉元素添加data-flip="false"实现了这一目标。

例如： <a href="#" id="drop2" data-toggle="dropdown" data-flip="false">dropdown</a>

Answer 4

在选项中，您可以尝试将dropupAuto : true更改为dropupAuto : false。 https://developer.snapappointments.com/bootstrap-select/options/#bootstrap-version

Bootstrap 4 Dropdown - 禁用popper.js导致的自动放置

4 个答案: