Question

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

我曾用过波纹管来创建名片视图。它垂直创建卡片视图。那意味着单行

<% 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++) {      
 }

请帮助我在上面的代码中创建水平卡片视图。

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++;

    }%>

如何在Bootsstap 4中使用服务器端数据创建动态响应卡视图？

1 个答案: