Bootstrap 5下拉菜单按钮与菜单宽度不一致问题求助

问题场景 #

使用Bootstrap 5标准下拉菜单代码时，按钮和展开后的菜单宽度不一致。需要实现：

• 菜单收起时，按钮固定为170px宽度
• 菜单展开时，按钮宽度与菜单宽度完全对齐

解决方案 #

添加以下自定义CSS代码：

1. 给收起状态的按钮设置固定宽度：

.dropdown-toggle {
  width: 170px;
}

2. 让展开状态的按钮和菜单使用同一宽度（将***px替换为你实际需要的菜单宽度，比如菜单内容适配200px，就写200px）：

.dropdown-toggle.show, 
.dropdown-menu.show {
  width: ***px;
}

如果希望菜单宽度自适应内部内容，也可以把宽度设置为fit-content：

.dropdown-toggle.show, 
.dropdown-menu.show {
  width: fit-content;
}

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