.dropdown-menu 的 min-width: 10rem 是宽度控制的真正拦路虎，需用更高优先级选择器加 !important 覆盖，或通过 css 变量 --bs-dropdown-min-width 全局调整。
dropdown-menu 的 min-width 是宽度控制的真正拦路虎
Bootstrap 5.3 的 .dropdown-menu 默认带 min-width: 10rem（即 160px），这个值硬编码在 bootstrap.css 里，优先级极高。你直接在 HTML 上写 style="width: 120px" 或加 dropdown-menu-sm 类，根本没用——min-width 会把容器撑开，实际宽度仍是 160px。
常见错误现象：
- 加了
dropdown-menu-sm，文字变小、内边距缩小，但菜单还是宽得离谱 - 给
.dropdown-menu写style="min-width: auto"，完全无效（auto不覆盖数值声明） - 全站统一加
!important覆盖，结果所有下拉菜单（包括模态框里的、表单里的）都被强制缩窄，布局错位
只改特定二级菜单：用自定义类 + 更高优先级选择器
最稳妥的做法是：不碰全局变量，也不依赖 !important，而是为需要定制宽度的二级菜单单独加 class，并用足够具体的选择器干掉默认 min-width。
实操建议：
- 给触发二级菜单的
<li>加一个明确 class，比如class="dropdown-submenu" - 对应二级
<ul class="dropdown-menu"></ul>也加配套 class，如dropdown-menu-sub - CSS 这样写：
.dropdown-submenu .dropdown-menu-sub {<br> min-width: 8rem !important;<br> width: 10rem;<br>}（注意：!important是必要的，因为要压过 Bootstrap 原生 CSS 的 specificity） - 如果二级菜单嵌在导航栏里（
.navbar-nav下），可进一步限定：.navbar-nav .dropdown-submenu .dropdown-menu-sub {<br> min-width: 6rem !important;<br>}
Bootstrap 5.2+ 可用 CSS 变量精准控制
如果你只改全局行为、且确定所有下拉菜单都该统一宽度，Bootstrap 5.2+ 提供了 CSS 自定义变量方案，比硬写 !important 更干净。
只需在 :root 或某个父容器上设置：
:root {<br> --bs-dropdown-min-width: 6rem;<br>}
或局部生效：
.my-navbar {<br> --bs-dropdown-min-width: 7rem;<br>}
这个变量会自动透传到所有 .dropdown-menu，无需额外 class 或 !important。但注意：它影响的是整个作用域下的所有下拉菜单，不能按单个二级菜单区分。
折叠菜单中二级菜单宽度异常的连带问题
当二级菜单放在 .collapse .navbar-collapse 里时，容易出现宽度计算失效——不是 CSS 没生效，而是父容器 flex 布局未约束子项收缩行为。
关键点：
- 确保
.dropdown-submenu的父级是.navbar-nav，且没意外套了float或position: absolute - 避免在
.dropdown-menu-sub上同时用w-100或flex-fill，它们会和min-width冲突 - 若二级菜单内有长文本选项导致溢出，不要靠
text-truncate（对ul无效），而应限制max-width并配合overflow-x: hidden
真正难调的从来不是“怎么设宽度”，而是搞清哪个 min-width 在起效、谁的优先级更高、以及它是否被父容器的 flex 行为悄悄绕过了。
