Bootstrap 5.1.3 Dropdown组件data-bs-boundary属性失效问题问询

失效原因 #

升级到Bootstrap v5后Dropdown组件的配置逻辑有两处核心调整，导致原Bs4的兼容方案失效：

• Bs5要求所有Dropdown相关的data-*属性必须挂载在带有data-bs-toggle="dropdown"的触发按钮上，而非外层的.dropdown容器，你原代码中属性挂载位置错误是核心原因
• 底层依赖的Popper升级到v2版本，溢出控制相关的配置结构调整，单一data-bs-boundary不能同时覆盖翻转、溢出阻止两个修饰器的规则
• 你原代码中下拉菜单的aria-labelledby属性指向错误，也可能触发默认布局规则异常

修复步骤 #

1. 调整属性挂载位置，把所有Dropdown配置属性移到触发按钮上，同时给下拉菜单加dropdown-menu-end类适配右对齐布局
2. 直接传入完整Popper配置覆盖默认溢出规则，无需额外JS初始化

修复后完整代码 #

<div id="CampaignSelector" class="nav-item dropdown">
<!-- 所有Dropdown配置属性绑定到触发按钮 -->
<button id="btnCampaignSelector" class="btn btn-primary text-uppercase dropdown-toggle" type="button" 
  data-bs-toggle="dropdown"
  data-bs-boundary="window"
  data-bs-popper='{"modifiers": [{"name": "flip", "options": {"boundary": "window", "padding": 8}}, {"name": "preventOverflow", "options": {"boundary": "window", "padding": 8}}]}'>
    Macray's Keep Lobby
</button>
<!-- 新增dropdown-menu-end适配右对齐，修正aria-labelledby指向 -->
<div id="ddCampaignSelector" class="dropdown-menu dropdown-menu-end" aria-labelledby="btnCampaignSelector">
        <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>

额外注意 #

检查项目自定义CSS中有没有给.dropdown-menu加了overflow: hidden或者固定宽度限制，如果有的话需要移除，避免强制截断内容。

内容的提问来源于stack exchange，提问作者Steven Frank