如何在Bootstrap中实现SVG图标与文本内容同行右对齐

可行解决方案 #

你原来的代码失效的核心原因是float布局会导致文本块换行，且外层col-1宽度不足，你可以直接用Bootstrap 4自带的Flex布局工具实现需求，不需要额外写自定义CSS：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<!-- 外层容器调整：改用flex布局，整体右对齐，元素垂直居中 -->
<div class="col-3 d-flex justify-content-end align-items-center">
  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="#2DB757" class="bi bi-circle-fill mr-2">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <div id="numOfStatus">Completed</div>
</div>

核心改动说明：

• 把外层宽度从col-1调整为col-3（也可根据实际布局调整为col-auto自适应宽度），避免宽度不足挤压内容
• 给外层加d-flex开启flex布局，justify-content-end让整个图标+文本组合靠右对齐，align-items-center让图标和文本垂直方向居中对齐
• 去掉svg的float-right和多余的margin样式，改用Bootstrap自带的mr-2设置图标和文本的间距，避免布局错乱

如果需要整个容器占满整行再靠右，给外层加w-100类即可。

可选方案（不使用Flex） #

如果你需要兼容更低版本的环境，也可以用文本右对齐+行内块实现：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="col-3 text-right">
  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="#2DB757" class="bi bi-circle-fill align-middle mr-2">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <div class="d-inline-block align-middle" id="numOfStatus">Completed</div>
</div>

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