Bootstrap中如何实现文本与SVG按钮同一行显示不换行

• 用float-right做右对齐本身就容易引发布局异常：浮动元素会脱离正常文档流，在嵌套内联元素的场景下，很容易出现高度计算错误、元素被挤到下一行的问题，你遇到的换行就是这个原因导致的。
• 之前尝试的justify-content-end、align-self-end这类Flex对齐类不生效，核心原因是没有给父容器添加d-flex基础类——Bootstrap中所有Flex相关的对齐属性，都必须在设置了display: flex的容器上才能生效。
• 给内层div加d-inline、加text-nowrap都没触及核心问题：这些属性没法修正浮动带来的排版错位，自然不会产生效果。

弃用容易出问题的float方案，直接用Bootstrap原生Flex布局实现同一行排版，稳定性更高不会出现异常换行：
如果文本和按钮是同级元素（在同一个父容器下），给二者的共同父容器添加Flex类即可：

<!-- 文本+按钮的共同父容器 -->
<div class="d-flex align-items-center justify-content-between">
  <!-- 这里替换为你需要和按钮同排展示的文本内容 -->
  <span>你的实际展示文本</span>
  <a href="#" class="mx-1 text-muted" title="Impossible to {{ selected.blabla }} or whatever">
      <div class="m-sg-list-img__item">
          <svg class="svg-icon svg-circle-cross" aria-hidden="true" focusable="false">
              <use xlink:href="{% static 'svg-icons/icon-sprite.svg' %}#circle-cross"></use>
          </svg>
      </div>
  </a>
</div>

如果文本本身就需要放在a标签内部，直接给a标签加Flex类即可，不需要额外嵌套父容器：

<a href="#" class="mx-1 text-muted d-flex align-items-center justify-content-between text-nowrap" title="Impossible to {{ selected.blabla }} or whatever">
    <span>Impossible to {{ selected.blabla }} or whatever</span>
    <div class="m-sg-list-img__item">
        <svg class="svg-icon svg-circle-cross" aria-hidden="true" focusable="false">
            <use xlink:href="{% static 'svg-icons/icon-sprite.svg' %}#circle-cross"></use>
        </svg>
    </div>
</a>

• 移除了svg上的float-right类，从根源上避免浮动导致的排版错位问题。
• 父容器添加d-flex开启弹性布局，align-items-center实现文本和按钮垂直方向居中对齐，justify-content-between自动将文本推到左侧、按钮推到右侧，默认同一行展示不会换行。
• 如果窄屏场景下需要强制不折行，给父容器添加text-nowrap类即可实现整行不换行效果。

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