twitter-bootstrap - Bootstrap 5.1.3 Dropdown data-bs-boundary 不再有效

Question

在 v5 升级之前，我在具有可变长度菜单项的下拉列表中使用 data-boundary="window"。假设 data-bs-boundary 是新属性，这将不再有效。

下拉菜单在页面上右对齐，因此，比所选项目长的下拉项目会被窗口边缘截断。

我也试过迁移文档中提到的 data-bs-popper 属性，但无济于事。

这在 4.6 中运行良好。

根据请求更新，这里是一些代码(这是从浏览器呈现的标记)

<div id="CampaignSelector" class="nav-item dropdown" data-bs-boundary="body">
<button id="btnCampaignSelector" class="btn btn-primary text-uppercase dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Macray's Keep Lobby
</button>
<div id="ddCampaignSelector" class="dropdown-menu" aria-labelledby="ddCampaignSelector">
        <div class="dropdown-item d-flex justify-content-between _campaign" data-campaign-id="00000000-0000-0000-0000-000000000000">
            <span>Macray's Keep Lobby</span>
        </div>
        <div class="dropdown-item d-flex justify-content-between _campaign" data-campaign-id="fba19b32-46f0-4650-b260-a0079a907c28">
            <span>Reign of Tiamat: Maquis of Westgate</span>
        </div>
        <div class="dropdown-item d-flex justify-content-between _campaign" data-campaign-id="2f87a37d-a387-41ec-87f7-ccf9004f4f6e">
            <span>A Dark &amp; Stormy Knight</span>
        </div>
        <div class="dropdown-item d-flex justify-content-between _campaign" data-campaign-id="0a5a8db5-617b-4797-ab41-eba75bd9ffea">
            <span>The Forgotten</span>
                <span class="badge badge-primary _unread-count"><i class="fas fa-fw fa-envelope" aria-hidden="true"></i>1</span>
        </div>
</div></div>

如果它对您更有效，那么这个。

https://jsfiddle.net/q78n9p4v/

Answer 1

只需将 position-static 类添加到 dropdown 容器即可。