如何让Bootstrap 5下拉选项及autoComplete建议项宽度适配最长内容？

核心CSS调整方案 #

首先移除你当前给li设置的固定宽度限制，然后调整下拉容器的样式，让它由内部最长内容撑开：

/* 重置下拉选项的宽度设置 */
.autocomplete-suggestions li {
  width: auto;
  white-space: nowrap; /* 保持内容单行完整显示，可选：如果允许换行可删除此行 */
  overflow: visible; /* 确保内容不被截断 */
}

/* 调整下拉容器的宽度逻辑 */
.autocomplete-suggestions {
  width: auto;
  min-width: 200px; /* 可选：设置最小宽度避免过窄 */
  max-width: none; /* 移除最大宽度限制 */
  display: inline-block; /* 让容器宽度由内部内容决定 */
  position: absolute; /* 保持下拉的绝对定位，避免受父容器宽度限制 */
}

额外注意事项 #

• 如果你的输入框有固定宽度，下拉容器默认可能会继承这个宽度，此时需要确保position: absolute已正确设置，让下拉容器脱离输入框的宽度约束。
• 若需要允许内容换行显示，只需删除li样式里的white-space: nowrap，并将overflow设置为visible或auto（内容过长时显示滚动条）。
• 检查是否有其他全局CSS规则（比如通用的li样式）覆盖了当前设置，可通过浏览器开发者工具排查样式优先级问题。

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