Bootstrap的.dropdown-menu默认min-width来自CSS硬编码（v5.3为160px），需用!important覆盖或CSS变量--bs-dropdown-min-width动态控制，内置sm/lg类仅调内边距与字号，不改最小宽度。
dropdown-menu默认最小宽度从哪来
Bootstrap的.dropdown-menu自带min-width: 10rem（v5.3中为160px），不是靠JavaScript算的，是纯CSS硬编码。它写在bootstrap.css里，优先级高，直接加width: 200px往往无效——因为min-width会卡住你。
常见错误现象：style="width: 120px"没用、用!important临时压住但后续组件错位、改了全局导致所有下拉菜单变窄。
真正该做的，是覆盖这个min-width，且只作用于你需要的下拉菜单。
怎么精准覆盖特定下拉菜单的宽度
用更具体的选择器干掉默认min-width，再设width或max-width：
立即学习“前端免费学习笔记（深入）”；
- 给触发按钮加自定义类，比如
data-bs-toggle="dropdown"的<button></button>加class="dropdown-toggle-custom-width" - 对应的
<ul class="dropdown-menu"></ul>也加一个配套类，如dropdown-menu-custom-width - 在你的CSS里写：
.dropdown-menu-custom-width { min-width: 120px !important; width: 120px; }
注意：必须用!important，否则Bootstrap的源码CSS权重更高；width设不设都行，但min-width必须显式覆盖。
用CSS变量动态控制宽度（v5.2+推荐）
Bootstrap 5.2起支持CSS变量，--bs-dropdown-min-width就是那个“罪魁祸首”。你可以局部重设它：
- 不改全局，只对某个
<div class="dropdown">加<code>style="--bs-dropdown-min-width: 140px;" - 或写CSS：
.my-special-dropdown .dropdown-menu { --bs-dropdown-min-width: 140px; } - 以为加了
sm类就能变窄，结果菜单还是撑开 - 把
dropdown-item里的文字用text-truncate硬截，但容器仍保持默认最小宽度，白边刺眼 - 在
dropdown-menu上直接写style="min-width: auto"——不行，Bootstrap的min-width是10rem，auto不覆盖数值型声明
使用场景：后台表格里每列下拉菜单要适配列宽；表单里带图标的下拉需要紧凑排布。
性能影响几乎为零；兼容性看Bootstrap版本，v5.1及更早不支持该变量，得回退到!important方案。
为什么不能只靠dropdown-menu-sm或dropdown-menu-lg
Bootstrap内置的尺寸类根本不管宽度：dropdown-menu-sm只缩padding和font-size，min-width照旧是160px；dropdown-menu-lg同理，只是放大文字和内边距。
容易踩的坑：
真正可控的只有--bs-dropdown-min-width（新版本）或显式min-width: Xpx !important（老版本）。
改完记得在真实设备上点开看——移动端下拉菜单若设死宽度，可能超出视口，这时候max-width: 90vw比width更安全。
