如何实现Bootstrap下拉按钮文本居左、图标居右对齐

无需借助网格系统或新增额外布局元素，仅通过调整按钮本身的CSS属性即可实现需求：

• 给下拉触发按钮添加flex布局配置，让内部子元素自动两端分布、垂直居中
• 移除图标原有强制居中的外边距属性，避免干扰对齐效果

修正后完整CSS代码 #

.dropdown {
  display: flex;
  width: 40%;
  height: 10vh;
  border: none;
}

.dropdown button {
  font-size: 1.8vw;
  color: #ffffff;
  width: 100%;
  height: 100%;
  border: none;
  /* 新增flex布局相关属性 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown button i {
  font-size: 1.8vw;
  /* 移除原有 margin: auto 配置 */
}

.dropdown button::after {
  display: none;
}

效果说明 #

代码修改后：

• 按钮内的文本内容会自动靠左对齐
• 右侧的下拉图标会完全贴靠按钮右侧对齐
• 文本和图标在垂直方向保持居中，不会出现上下错位
• 下拉组件原有展开、选中交互逻辑完全不受影响

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