逐步将行添加到 JSP 页面(使用 Bootstrap 框架）

我正在为我的JSP页面使用引导框架。在一个特定的JSP页面中，我在页面的中心放了一个大圆圈，在大圆圈周围放了其他6个小圆圈。为了实现这一点，我将页面分为行和跨度。缩小后的版本如下所示：

    <div class=row>
       <div class=span2> //Small circle 4 </div>
       <div class=span2> //Small circle 6 </div>
    </div>
    <div class=row>
       <div class=span2> //Small circle 1 </div>
       <div class=span2> //Small circle 5 </div>
    </div>
    <div class=row>
         //Big Circle
    </div>
    <div class=row>
       <div class=span2> //Small circle 2 </div>
       <div class=span2> //Small circle 3 </div>
    </div>

servlet 向 JSP 页面发送要显示多少个圆圈（每次小圆圈的总数 （=sum） 都不同。总和为 ε [0， 6] ）。到目前为止，我所做的是将 if 语句放到每个跨度上，如下所示：

    <% int i=0 %>
    <div class=row>
       <% if (i<sum) {%>
             <div class=span2> //Small circle 4 </div> <% i++ } %>
       <% if (i<sum) %>    
             <div class=span2> //Small circle 6 </div> <% i++ } %>
    </div>
    //etc...

使用这种方法，我从上到下添加行，因此我在大圆圈上方放置了 4 个小圆圈，在大圆圈下方放置了 2 个小圆圈。所以：

• 如果 sum = 3，我将在上面有 3 个小圆圈，在下面有 0 个小圆圈
• 如果 sum = 5，我将在上面有 4 个小圆圈，下面有 1 个小圆圈，依此类推。

但是，如果想把我命名的小圆圈，例如

• 如果 sum = 3，则在上方显示 1 个小圆圈，在下方显示 2 个小圆圈

我想把这一切嵌套在一段时间的声明中，然后说：

    <% int i=0;
       while (i < sum) { %>
             <div class=row>
                <% if (i == 4) { %>
                      <div class=span2> //Small circle 4 </div> <% } %>
                <% if (i == 6) { %>
                      <div class=span2> //Small circle 6 </div> <% } %>
             </div>
             //etc..
     <% i++; } %> //end of while

所以理论上我在大圆的上方和下方逐渐添加行。然而，真正发生的事情是，在每个循环中，卷轴都添加到前一个循环之后。所以它们以这样的顺序出现：大圆圈和它的下面，小圆圈 1，2，3，4，5，6。

结语：有没有办法，我可以以我喜欢的方式向我的页面添加行？