Bootstrap 4 Dropdown - 禁用由 popper.js 引起的自動放置

Question

我正在使用 Bootstrap 4 下拉列表，大約有 18 個下拉項目。 因為高度太大，popper.js 會自動將下拉框從原來的位置移到屏幕頂部。 我如何防止這種情況？ 我總是希望下拉菜單出現在切換它的按鈕正下方。 謝謝

按要求發布代碼 - （我使用的是 C#，但代碼應該傳達我希望的觀點）

             <div class="dropdown">
                <span class="p-2 text-uppercase font-weight-semi-bold pointer dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    @topMenu.Name
                </span>
                <div class="dropdown-menu"  style="font-size:0.9rem" aria-labelledby="dropdownMenuButton">
                    @foreach (var subMenu in topMenu.SubMenu)
                    {
                        <a class="dropdown-item" href="@Url.Content("~/" + subMenu.Url)">@subMenu.Name</a>

                    }
                </div>
            </div>

Answer 1

引導程序 4.1

有一個新的“顯示”選項可以禁用 popper.js 下拉定位。 使用data-display="static"防止 popper.js 動態改變下拉位置...

引導程序 4.0

popper.js和定位存在一些問題。

我發現解決方案是position-relative對於.dropdown position-relative ，並將其設置為下拉切換中的data-boundary=""選項： https : .dropdown

  <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：為什么不顯示可滾動下拉列表中的彈出窗口？
在 Bootstrap4 的模式中滾動下拉列表

Answer 2

我在 Bootstrap 4.3.1 中通過向下拉元素添加data-flip="false"實現了這一點。

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

Answer 3

ZimSystems 在 Bootstrap 4.1 中幾乎是正確的。 在打開時禁用下拉更改方向，也就是。 它是 x-placement="bottom-end"，您應該使用“翻轉”選項，而不是“顯示”選項。

Display static 完全禁用定位，而 flip 僅禁用 LIVE 檢查，當您向屏幕頂部滾動時，將下拉菜單倒置。

Answer 4

在選項中，您可以嘗試將dropupAuto : true更改為dropupAuto : false 。 https://developer.snapappointments.com/bootstrap-select/options/#bootstrap-version