java - 如何在 Bootstrap 4 中使用服务器端数据创建动态响应式卡片 View ？

Question

我想创建一个从循环动态生成的卡片 View 。但卡片 View 是垂直生成的。我想要行中 3 列。但是当我运行时，它会生成垂直卡片 View 。实际上我的数据来自服务器。这是我的卡片 View 图像。

我使用下面的方法来创建卡片 View 。它垂直创建卡片 View 。这意味着单行

<% for (User_Model model : list) {%>       
                 <div class="row">
                         <div class="col-sm-4">                
                             <div class="card" >                                     
                                 <div class="card-body">
                                     <h5 class="card-title">Card Title</h5>
                                     <p class="card-text"> Text</p>
                                 </div>                                    
                             </div>                
                         </div>                        

                     </div>
        <% }%>

我的上述循环给出了类似的数据

  for (i = 0; i < 5; i++) {      
 }

请帮我在代码上方创建水平卡片 View ..

Answer 1

试试这个。

输出会是这样的。 https://www.screencast.com/t/vvcIZU1Mv

<%! int loop_counter =1; int innerBreak = 1;%>
    <% for (User_Model model : list) {     

    if(innerBreak == 1){ %>
    <!-- when complete 3 column in a row open new-->
    <div class="row">
    <% } %>
             <div class="col-sm-4">                
                 <div class="card" >                                     
                     <div class="card-body">
                         <h5 class="card-title">Card Title</h5>
                         <p class="card-text"> Text</p>
                     </div>                                    
                 </div>                
             </div>                        

    <!-- when complete 3 column in a row closed previous open div -->
    <%if(loop_counter%3==0){%>
    </div>
    <% innerBreak = 1;}else{ innerBreak = 0;}

    loop_counter++;

    }%>