如何调整Bootstrap下拉菜单宽度使其适配内部ul/li元素

问题根因 #

1. Bootstrap原生.dropdown-menu默认有min-width: 160px的固定最小宽度限制，会干扰auto宽度的计算
2. 你代码中的分栏ul.category_dropdownmenu是默认块级属性，多个分栏会各自独占一行，不会横向排列
3. 二级导航的a标签设置了float: left但未做浮动清除，导致容器宽度计算异常

修复方案 #

修改原有CSS，新增对应规则即可：

#_desktop_top_menu #top-menu>li .sub-menu {
    top: 70%;
    left: 0;
    border: none;
    width: auto;
    min-width: fit-content !important; /* 覆盖bootstrap默认最小宽度限制，适配内容宽度 */
    z-index: 18;
    padding: 15px;
    margin: 0;
    transition: all 0.3s;
    text-align: left;
    border-radius: 4px;
    box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.3);
}
/* 分栏ul横向排列 */
.category_dropdownmenu {
    display: inline-block;
    vertical-align: top;
    margin-right: 24px; /* 可自行调整分栏间距 */
}
/* 清除二级导航浮动，避免宽高计算异常 */
.category_dropdownmenu ul li::after {
    content: '';
    display: table;
    clear: both;
}

修改后下拉菜单宽度会自动根据内部所有分栏的总宽度动态调整，无需手动设置固定宽度值。如果需要兼容低版本浏览器，可以将fit-content替换为max-content，同时可以根据实际展示效果调整分栏间距。

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