html - Bootstrap : Small text right next to thumbnail

Question

我正在尝试为网站构建一个简单的排行榜。网站是基于 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>

我有以下 CSS 来获取内联缩略图

.thumbnails img {
    float: left;
    margin-right: 10px;
    display: block;
}

我想要的是以下结构

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

每个缩略图代表一个徽章，括号中的数字表示该用户赢得了多少此类徽章。类似于 stackoverflow 的结构。我怎样才能改进我现有的代码来做到这一点。

Answer 1

您是否尝试过使用 Bootstrap Badge 组件:http://getbootstrap.com/components/#badges

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

然后我会简单地使用 bootstrap 网格来显示。

下面的示例使用了 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>