PHP BootStrap网格

I'm making a WordPress theme and using Advanced Custom Fields I have added a repeater option.

Now the thing is I want to allow the user to add as many "services" as they want but I am not sure how to make this so that bootstrap grids are dynamically created based on the number of services.

I saw this question: Using PHP loop to add Bootstrap rows and proper column numbers to elements But couldn't figure out how to use it properly with what I need.

What I tried was counting the number of services and returning the html from that function.

Then I made a str_replace_first_occurance function that basically did an str_replace on the first occurrence of "Content". And it looped through this the number of services there were.

I guess this should've worked but it became very messy and doesn't seem like the best way to do this.

What's the best way to achieve this?

How many do you want displayed per row? You would most likely want to run a foreach through the array that is given from your ACF repeater. Then put your value inside of the below. I assume you know how to get the php into your front-end?

    <div class="col-lg-4">
        // Content which is your service
    </div>

You could also get the count of the array from your repeater field to figure out how many services were added. Then you could do some logic to figure out if you want it to be a col-lg-3 or a col-lg-4.

I used this code and works perfectly!

    <?php

    $max_columns = 3; //columns will arrange to any number (as long as it is evenly divisible by 12)
    $column = 12/$max_columns; //column number
    $total_items = count( get_field('services_services'));
    $remainder = $total_items%$max_columns; //how many items are in the last row
    $first_row_item = ($total_items - $remainder); //first item in the last row
    ?>

    <?php $i=0; // counter ?>

    <?php while ( have_rows('services_services') ) : the_row(); ?> 

        <?php if ($i%$max_columns==0) { // if counter is multiple of 3 ?>
        <div class="row">
        <?php } ?>

        <?php if ($i >= $first_row_item) { //if in last row ?>   
        <div class="col-md-<?php echo 12/$remainder; ?>">
        <?php } else { ?>
        <div class="col-md-<?php echo $column; ?>">
        <?php } ?>

            <div class="service-box">
                <h3 class="service-heading"><?php echo the_sub_field('service_name'); ?></h3>
                <span class="<?php echo the_sub_field('service_fa_class'); ?>" aria-hidden="true"></span>
                <p class="heading-text"><?php echo the_sub_field('service_description'); ?></p>
                <a href="<?php echo the_sub_field('service_learn_more_url'); ?>" class="btn btn-info">Learn More</a>        
            </div>

        </div>        

        <?php $i++; ?>

        <?php if($i%$max_columns==0) { // if counter is multiple of 3 ?>
        </div>
        <?php } ?>

    <?php endwhile; ?>

    <?php if($i%$max_columns!=0) { // put closing div if loop is not exactly a multiple of 3 ?>
    </div>
    <?php } ?>