Bootstrap加载Spinner在列表项右侧显示异常（呈双线旋转）求助

导致Spinner显示为旋转线条而非圆圈的核心原因有两个：

• float类在flex容器中完全无效：你用了Bootstrap的row布局，而row本质是flex容器，其中的col作为flex子项，float-right这类浮动样式不会生效。这会导致右侧的col和左侧col平分容器宽度，Spinner的渲染空间被不合理拉伸。
• Spinner类直接绑定到col元素上的布局冲突：你把spinner-border系列类直接加在了col标签上，col的flex拉伸特性、默认内边距会干扰Spinner的正常渲染逻辑——Spinner依赖自身宽高相等的正方形容器来生成圆形边框，而被拉伸的col会让容器宽高比例失调，最终显示为线条状。

改用Bootstrap的flex布局类实现左右对齐，同时让Spinner在独立的容器中渲染：

<ul class="list-group" id="my-list">
   <li class="list-group-item active" aria-current="true">
      <div class="d-flex justify-content-between align-items-center">
         <span>Keywords</span>
         <div class="spinner-border spinner-border-sm" role="status">
            <span class="sr-only">Loading...</span>
         </div>
      </div>
   </li>
</ul>

这里用d-flex创建flex容器，justify-content-between实现内容左右两端分布，align-items-center保证垂直居中，Spinner放在独立的div中，不会被布局类干扰，能正常渲染成旋转圆圈。

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