.dropdown-menu 的 min-width: 10rem 是宽度控制的真正拦路虎，需用高优先级选择器加 !important 覆盖；bootstrap-select 则依赖 data-width 属性，且长文本换行需同步调整三层样式。
dropdown-menu 的 min-width 是宽度控制的真正拦路虎
Bootstrap 5.3 的 .dropdown-menu 默认带 min-width: 10rem（即 160px），这个值硬编码在 bootstrap.css 里，优先级极高。你写 style="width: 120px" 或加 dropdown-menu-sm 类，根本压不住它——菜单照样撑到 160px。
常见错误现象包括：
- 加了
dropdown-menu-sm，文字和内边距变小了，但菜单宽度纹丝不动 - 给
.dropdown-menu直接写min-width: auto，完全无效（auto无法覆盖数值声明） - 全站统一用
!important覆盖min-width，结果所有下拉菜单（包括模态框里、表单里的）都被强制缩窄，布局错位
只改特定二级菜单：用自定义类 + 更高优先级选择器
最稳妥的做法是不碰全局样式，只为需要定制宽度的二级菜单单独加 class，并用足够具体的选择器干掉默认 min-width。
实操建议：
- 给触发二级菜单的容器加明确 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
，避免污染其他位置的下拉菜单
bootstrap-select 的 data-width 控制逻辑完全不同
bootstrap-select 的宽度由 data-width 属性驱动，和原生 .dropdown-menu 完全无关。它有四种行为，不能混用：
-
data-width="auto"：自动适配最宽选项的offsetWidth，适合文本长度差异大的场景 -
data-width="fit"：匹配当前选中项宽度，适合多步骤表单中强调状态变化 -
data-width="200px"或data-width="50%"：固定宽度，注意单位必须显式写出 -
data-width="false"：移除所有宽度样式，交由父容器控制
别把 data-maxwidth 和 data-width 混着用——data-maxwidth 只影响下拉面板本身，而 data-width 同时控制触发按钮和面板宽度。
长文本换行必须同时改 white-space 和父容器宽度
仅加 white-space: pre-wrap 和 word-wrap: break-word 不够，因为 bootstrap-select 的下拉面板默认会自适应内容宽度，导致换行后整体仍被撑开。
关键要同步调整三层：
-
.bootstrap-select .dropdown-menu加max-width: 100%和min-width: 100% -
.bootstrap-select .dropdown-menu li a span.text加display: inline-block和max-width: 100% - 确保外层容器（如
.col或.form-group）本身有明确宽度约束，否则100%会失效
漏掉任何一层，换行都可能不生效，或者只在部分选项上起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
