如何在Bootstrap-Vue中缩小b-dropdown-item下拉项的宽度

解决方案 #

BootstrapVue 的 b-dropdown 下拉菜单宽度默认由外层 .dropdown-menu 容器控制，容器本身存在min-width: 10rem的默认规则，仅给内层b-dropdown-item设置宽度无法生效，可按以下步骤修改：

1. 给b-dropdown组件添加自定义类名，避免全局样式污染：

<!-- 仅新增class属性，其余配置保持不变 -->
<b-dropdown class="version-dropdown" split split-variant="secondary-light" variant="secondary-light" :text="maxVersion.toString()" lazy
    :split-to="'/test'" @toggle="loadVersions">
    <!-- 内部代码保持不变 -->
</b-dropdown>

2. 添加对应样式覆盖默认规则，可根据项目情况选自适应内容宽度或固定宽度：

无scoped的全局样式写法

.version-dropdown .dropdown-menu {
  min-width: auto; /* 取消默认最小宽度限制 */
  width: fit-content; /* 宽度随内容自动适配，也可写固定值如 width: 70px */
}

Vue2 带scoped的单文件组件写法

/deep/ .version-dropdown .dropdown-menu {
  min-width: auto;
  width: fit-content;
}

Vue3 带scoped的单文件组件写法

:deep(.version-dropdown .dropdown-menu) {
  min-width: auto;
  width: fit-content;
}

如果需要更稳定的展示效果，可直接将width设为固定像素值，适配你的版本号最长长度即可。

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