如何阻止Bootstrap下拉菜单内的list-inline元素换行？

直接用Bootstrap的flex工具类就能搞定，不用折腾list-inline或者nowrap，步骤如下：

• 给每个下拉菜单项容器加 d-flex align-items-center，这样右侧元素会自动跟左侧换行的文本垂直居中对齐
• 左侧文本容器加 text-end flex-shrink-0 flex-basis-[你要的宽度]（比如flex-basis-150），text-end实现右对齐，flex-shrink-0保证所有左列宽度一致，不会被压缩
• 右侧的排序按钮容器加 d-inline-flex gap-2，强制两个按钮在一行显示，gap-2控制间距
• 给外层的.dropdown-menu加 w-auto，让它自适应内容宽度，避免内容溢出

示例代码：

<div class="dropdown-menu w-auto">
  <div class="dropdown-item d-flex align-items-center p-3">
    <span class="text-end flex-shrink-0 flex-basis-150 me-2">By a much longer field</span>
    <div class="d-inline-flex gap-2">
      <button class="btn btn-sm btn-light">Recent first</button>
      <button class="btn btn-sm btn-light">Oldest first</button>
    </div>
  </div>
  <!-- 其他菜单项同理 -->
</div>

如果不想用固定宽度的工具类，也可以自定义样式：

.left-label {
  min-width: 150px;
  text-align: right;
  flex-grow: 0;
  flex-shrink: 0;
}

然后把左侧文本的类换成left-label me-2即可。

这样既保证左列宽度一致、右对齐且可换行，右侧元素垂直居中，还能让下拉菜单自适应内容宽度，不会出现溢出问题。

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