PHP BootStrap Grid


PHP BootStrap Grid

我正在制作一个WordPress主题,并使用高级自定义字段,我添加了一个重复器选项。

现在的事情是,我想让用户添加尽可能多的"服务",因为他们想,但我不确定如何使这一点,使引导网格是动态创建基于服务的数量。

我看到这个问题:使用PHP循环添加Bootstrap行和适当的列号到元素但是我不知道如何正确地使用它来满足我的需要。

我尝试的是计算服务的数量并从该函数返回html。

然后我做了一个str_replace_first_occurance函数,基本上在"Content"第一次出现时做了一个str_replace。然后循环计算服务的数量

我想这应该是有效的,但它变得非常混乱,似乎不是最好的方法。

实现这一点的最佳方法是什么?

我使用了这段代码,效果非常好!

    <?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 } ?>

您希望每行显示多少?您很可能希望通过ACF中继器给出的数组运行foreach。然后把你的价值放在下面。我想你应该知道如何把php放到前端吧?

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

您还可以从您的中继器字段中获得数组的计数,以确定添加了多少服务。然后你可以做一些逻辑运算来确定你是想让它成为coll - long -3还是coll - long -4