要使 dropdown-menu 的 border-width 生效，必须先覆盖其默认 min-width：10rem，推荐使用 CSS 变量 --bs-dropdown-min-width（Bootstrap 5.2+），配合显式声明 border-style 和 border-color。
dropdown-menu 的 min-width 是边框宽度的真正拦路虎
直接给 .dropdown-menu 加 border-width 看似合理，但几乎总失败——因为它的默认 min-width: 10rem（160px）会强制撑开容器，导致你设的边框被“挤”在宽大的盒子里，视觉上粗细没变化，甚至被截断。更糟的是，这个 min-width 来自 Bootstrap 5.3 的基础样式，优先级极高，普通 class 或内联 style 根本覆盖不了。
改边框宽度必须先解决 min-width 冲突
想让 border-width 生效，得先让盒子“听话”。关键不是加粗边框，而是让容器尺寸配合你的边框意图：
- 用更具体的选择器，比如
.my-dropdown .dropdown-menu，避免全局污染 - 显式重置
min-width：写成min-width: auto !important或具体值如min-width: 120px !important - 再叠加边框：比如
border: 2px solid #dee2e6，注意别只写border-width，它必须和border-style、border-color一起声明才可见 - 如果用 Bootstrap 边框工具类（如
border-2 border-light），确保父元素没禁用border-style（例如某些重置 CSS 里写了border: 0）
推荐用 CSS 变量精准控制（Bootstrap 5.2+）
Bootstrap 5.2 起支持 --bs-dropdown-min-width 变量，这是最干净的解法，不用 !important 也能生效：
.my-custom-dropdown .dropdown-menu {
--bs-dropdown-min-width: 140px;
border-width: 2px;
border-style: solid;
border-color: #ced4da;
}
把这段 CSS 放在 Bootstrap 主样式之后加载，然后在 HTML 中这样用：<div class="dropdown my-custom-dropdown">。变量会自动影响内部所有 .dropdown-menu 实例，且不影响其他下拉菜单。
立即学习“前端免费学习笔记（深入）”；
容易忽略的兼容细节
很多开发者试了上面方法还是没效果，问题常出在这些地方：
-
.dropdown-menu默认是position: absolute，若父级.dropdown没设position: relative，边框可能错位或被裁剪 - 用
border-2类时，必须同时有border（即border-style: solid）或颜色类（如border-light），否则只有宽度没颜色，等于没边框 - 如果下拉菜单里嵌套了
.dropdown-submenu，它的子菜单默认继承父级min-width，需单独为.dropdown-menu-sub设置变量或规则 - Safari 下对
border-radius和overflow: hidden组合敏感，边框可能被圆角切掉——建议显式加overflow: visible测试
边框宽度本身不是响应式属性，别费劲写媒体查询去适配不同屏幕；重点是让容器尺寸、定位和边框三者协同，否则再细的调试也白搭。
