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徽章组件：http://getbootstrap.com/components/#badges

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

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

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

bootstrap：缩略图旁边的小文本

1 个答案: