Bootstrap无序列表中justify-content-between不生效，如何实现$右对齐？

云原生阿岚

2026-8-19

问题排查与解决

核心问题1：HTML标签语法错误

你的代码里span标签未正确闭合，写成了/span>，正确写法应该是</span>。这个语法错误会导致浏览器解析HTML结构异常，Bootstrap的flex布局样式无法正常作用在容器上。

核心问题2：多余换行标签干扰flex布局

<li>里的<br>标签是多余的，flex容器是横向布局逻辑，这个换行标签会破坏flex的排列结构，导致元素无法按预期分布在容器两端。

修正后的代码

<div class="row">
   <div class="col-md-6">
        <div class = "text-info"> 
             <h5> Cambios </h5>
        </div>
     <ul class="list-group">
          {% for c in cambios%}
               <li class="list-group-item d-flex justify-content-between align-items-center">
                     <div>
                         <h6 class="my-0">{{c['cantidad']}} &nbsp; {{c['producto']}}</h6>
                         <small class="text-muted"> X &nbsp; {{c['cambio_por']}}</small> 
                      </div>    
                      <span>{{ "${:,.0f}".format(c['diferencia']) }}</span>
                </li>
           {% endfor %}
      </ul>
    </div>
    <div class="col-md-6">
    </div>
</div>

额外添加了align-items-center类，让左右元素垂直居中，优化视觉效果。