Html 引导：缩略图旁边的小文本

我试图建立一个简单的网站领导委员会。该网站基于jsp，目前我有以下结构：

    <div class="panel panel-primary">
        <div class="panel-heading"><h3 class="panel-title">Global Leader Board</h3>
        </div>
        <div class="panel-body">
            <!-- <c:import url="/jsp/components/recommendations.jspf"/> -->
            <c:if test="${(not empty globalLeaderByCompletionRate) and (fn:length(globalLeaderByCompletionRate)>0)}">
                <c:forEach items="${globalLeaderByCompletionRate}" var="completedRec" varStatus="recLoop">
                    <div class="row">
                            <div class="thumbnails">
                                ${completedRec.representativename}
                                ${completedRec.completedPercent }
                                <c:if test="${completedRec.goldCompleted > 0}">
                                    <img src="<c:url value="/img/gold.png"/>"  width="25">
                                </c:if>
                                <c:if test="${completedRec.silverCompleted > 0}">
                                    <img src="<c:url value="/img/silver.png"/>" width="25">
                                    ${completedRec.silverCompleted}
                                </c:if>
                                <c:if test="${completedRec.bronzeCompleted > 0}">
                                    <img src="<c:url value="/img/bronze.png"/>" width="25">
                                    ${completedRec.bronzeCompleted}
                                </c:if>                             
                            </div>              
                    </div>
                </c:forEach>    
            </c:if>                                                         
        </div>              
    </div>

我想要的是下面的结构

userName: 56% Completed thumbnailImage(2) thumbnailImage(1) thumbnailImage(5) 

---

每个缩略图代表一个徽章，括号中的数字表示该用户赢得了多少此类徽章。与stackoverflow的结构类似。如何改进现有代码来实现这一点

您是否尝试使用引导徽章组件：

这将为您提供金奖/银奖/铜奖旁边的数字

然后，我只需使用引导网格来显示

下面的示例使用12个网格中的10个，但显然要根据周围的div和布局进行调整：

<div class="row">
    <div class="col-md-2">${completedRec.representativename}</div>
    <div class="col-md-2">${completedRec.completedPercent }</div>
    <c:if test="${completedRec.goldCompleted > 0}">
    <div class="col-md-2"><img src="<c:url value="/img/gold.png"/>"<span class="badge">your value</span></div>
    </c:if>
    <c:if test="${completedRec.silverCompleted > 0}">
    <div class="col-md-2"><img src="<c:url value="/img/silver.png"/>"<span class="badge">your value</span></div>
    </c:if>
    <c:if test="${completedRec.bronzeCompleted > 0}">
    <div class="col-md-2"><img src="<c:url value="/img/bronze.png"/>"<span class="badge">your value</span></div>
    </c:if>
</div>  

${completedRec.representativename}
${completedRec.completedPercent}
“你的价值
“你的价值
“你的价值

<div class="row">
    <div class="col-md-2">${completedRec.representativename}</div>
    <div class="col-md-2">${completedRec.completedPercent }</div>
    <c:if test="${completedRec.goldCompleted > 0}">
    <div class="col-md-2"><img src="<c:url value="/img/gold.png"/>"<span class="badge">your value</span></div>
    </c:if>
    <c:if test="${completedRec.silverCompleted > 0}">
    <div class="col-md-2"><img src="<c:url value="/img/silver.png"/>"<span class="badge">your value</span></div>
    </c:if>
    <c:if test="${completedRec.bronzeCompleted > 0}">
    <div class="col-md-2"><img src="<c:url value="/img/bronze.png"/>"<span class="badge">your value</span></div>
    </c:if>
</div>