Bootstrap4下拉菜单float:right导致长文本下caret被挤下如何解决

你可以通过以下两种修改量极小的方案实现需求，不需要改动原有HTML结构，仅调整CSS即可：

方案1：Flex布局（推荐，兼容性满足Bootstrap4的支持范围） #

• 首先移除.dropdown-toggle::after伪元素上的float: right属性
• 给.dropdown-toggle新增以下CSS规则：

.dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 如需超长文本自动显示省略号，额外添加以下规则 */
  overflow: hidden;
}
/* 若菜单项文本有单独的span包裹，可添加以下规则实现文本溢出省略 */
.dropdown-toggle .menu-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

该方案利用flex布局的自动空间分配特性，caret会固定在容器最右侧，文本内容无论长短都不会将caret挤压到下一行。

方案2：绝对定位（适合无法调整布局模式的场景） #

• 同样先移除.dropdown-toggle::after的float: right属性
• 新增以下CSS规则：

.dropdown-toggle {
  position: relative;
  padding-right: 2em; /* 数值可根据caret大小调整，预留出caret的显示空间 */
}
.dropdown-toggle::after {
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  /* 保留原有caret的边框、宽度等默认样式即可 */
}

该方案将caret固定在菜单项右侧的固定位置，完全不受文本长度影响。

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