Bootstrap带badge徽章的下拉菜单宽度过小 如何实现自适应适配？

实现思路 #

放弃固定宽度设置，通过min-width+max-width组合控制下拉菜单的宽度范围，配合flex布局实现文本与badge的对齐，同时兼容滚动需求。

调整代码 #

1. CSS样式代码 #

/* 下拉菜单基础配置，适配宽度与滚动 */
.dropdown-menu {
  min-width: 160px; /* 可根据需求调整最小宽度，避免菜单过窄 */
  max-width: 320px; /* 可根据需求调整最大宽度，避免菜单过宽 */
  max-height: 75vh; /* 限制菜单最大高度，超出后自动垂直滚动，可自定义数值 */
  overflow-y: auto;
}

/* 菜单项布局，占满菜单宽度，文字与badge两端对齐 */
.dropdown-menu > li > a {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px; /* 文字与badge的间距，可自定义 */
  /* 若使用Bootstrap5，将选择器替换为 .dropdown-menu .dropdown-item 即可 */
}

/* 长文本处理，二选一即可 */
/* 方案A：长文本自动换行，完整显示所有内容 */
.dropdown-menu > li > a .menu-text {
  white-space: normal;
  word-break: break-word;
}

/* 方案B：长文本超出显示省略号，hover可通过title属性显示完整内容 */
/*
.dropdown-menu > li > a .menu-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
*/

2. Razor模板调整 #

给菜单文本新增外层span，对应样式里的.menu-text类：

@foreach (var item in Lieferanten)
{
    open = Model
        .Where(m => m.Bezahlt == false)
        .Where(e => e.Lieferant.Kurzname == item)
        .Count();

    <li>
        <a asp-area="" asp-controller="Er" asp-action="Index"
           asp-route-qry_payed="0"
           asp-route-qry_lief="@item"
           @* 选方案B的话可以加个title属性显示完整文本 *@
           @* title="@item" *@
           >
            <span class="menu-text">@item</span>
            <span class="badge">@open</span>
        </a>
    </li>
}

效果说明 #

• 短文本菜单项自动适配最小宽度，不会出现空白过多的过宽问题
• 长文本最多撑到设置的最大宽度，不会超出可视区域
• badge始终靠右对齐，不会和文本重叠或挤压
• 菜单项数量过多时自动触发垂直滚动，符合滚动需求

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