如何解决Bootstrap无样式列表中右浮动价格列宽过窄时换行的问题

你遇到的价格掉行问题，本质是float: right的布局逻辑缺陷：容器宽度不足时，左侧菜品文本占满整行后就会把右侧浮动的价格元素挤到下一行。直接用Bootstrap内置的Flex布局工具类替换浮动方案即可解决，无需额外写复杂的自定义CSS。

方案1（最推荐）：使用Bootstrap内置Flex类改造 #

直接修改你的列表代码如下：

<ul class="list-unstyled">
  <li class="d-flex justify-content-between gap-2">
    <span>rashcook omlette +khobz*</span>
    <span><u>8.5€</u></span>
  </li>
  <li class="d-flex justify-content-between gap-2 ps-3">
    <span>+rinderschinken</span>
    <span><u>3.5€</u></span>
  </li>
  <li class="d-flex justify-content-between gap-2 ps-3">
    <span>+avocado-minze</span>
    <span><u>3€</u></span>
  </li>
  <li class="d-flex justify-content-between gap-2 ps-3">
    <span>+tomaten-salsa</span>
    <span><u>2.5€</u></span>
  </li>
</ul>

用到的Bootstrap内置工具类说明：

• d-flex：将当前li设置为弹性盒布局，自动让内部元素横向排列
• justify-content-between：自动将内部左右两个元素分别贴左右两端对齐
• gap-2：给左右内容增加少量间距，避免文本和价格挨得过近
• ps-3：等效于你原来写的padding-left:10px，是Bootstrap内置的内边距工具类，不需要写行内样式

这个方案适配所有设备宽度，左侧菜品名称过长时会自动换行，价格始终固定在当前行的最右侧，不会掉到下一行。

方案2（兼容原有浮动写法） #

如果不想改动现有布局结构，也可以给价格的span标签添加style="white-space: nowrap; margin-left: 10px; float: right;"，同时给每个li加style="overflow: hidden;"即可，不过窄屏下可能出现横向滚动条，效果不如Flex方案。

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