Как создать динамическое представление адаптивной карты с использованием данных на стороне сервера в загрузочном этапе 4?

Question

Я хочу создать представление карты, которое динамически генерируется из цикла. Но просмотр карты генерируется вертикально. Я хочу 3 столбца в строке. Но когда я бегу, он генерирует вертикальный просмотр карты. На самом деле мои данные приходят с сервера. Вот мое изображение карты выглядит как ..

Я использовал ниже, как, чтобы создать вид карты. Это создает вид карты по вертикали. это означает, что один ряд

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

    }%>