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"的加class="dropdown-toggle-custom-width"
• 对应的
  也加一个配套类，如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就是那个“罪魁祸首”。你可以局部重设它：

• 不改全局，只对某个
  加style="--bs-dropdown-min-width: 140px;"
• 或写CSS：

  .my-special-dropdown .dropdown-menu {
  --bs-dropdown-min-width: 140px;
  }

使用场景：后台表格里每列下拉菜单要适配列宽；表单里带图标的下拉需要紧凑排布。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

性能影响几乎为零；兼容性看Bootstrap版本，v5.1及更早不支持该变量，得回退到!important方案。

为什么不能只靠dropdown-menu-sm或dropdown-menu-lg

Bootstrap内置的尺寸类根本不管宽度：dropdown-menu-sm只缩padding和font-size，min-width照旧是160px；dropdown-menu-lg同理，只是放大文字和内边距。

容易踩的坑：

• 以为加了sm类就能变窄，结果菜单还是撑开
• 把dropdown-item里的文字用text-truncate硬截，但容器仍保持默认最小宽度，白边刺眼
• 在dropdown-menu上直接写style="min-width: auto"——不行，Bootstrap的min-width是10rem，auto不覆盖数值型声明

真正可控的只有--bs-dropdown-min-width（新版本）或显式min-width: Xpx !important（老版本）。

改完记得在真实设备上点开看——移动端下拉菜单若设死宽度，可能超出视口，这时候max-width: 90vw比width更安全。