使用while循环在5列Bootstrap Carousel中显示无限数据

Question

有没有办法创建一个5列的Bootstrap Carousel并使用while循环输出所有图像？如何处理行和列？这是我的while循环：

  <?php if( have_rows('logos') ): ?>

<?php while( have_rows('logos') ): the_row(); 
        // vars
        $image = get_sub_field('logo_image');
        $content = get_sub_field('name');
?>
<div class="item active">
  <a href="#"><img src="<?php echo $image['url']; ?>"></a>
<?php endwhile; ?>
<?php endif; ?>

Answer 1

这是一个例子：

 <?php if( have_rows('logos') ): ?>
<div class="row">
<?php while( have_rows('logos') ): the_row(); 
        // vars
        $image = get_sub_field('logo_image');
        $content = get_sub_field('name');
?>
  <div class="item active col-2">
    <a href="#"><img src="<?php echo $image['url']; ?>"></a>
  </div>

<?php endwhile; ?>
</div>
<?php endif; ?>

Bootstrap doc：

使用.col- for extra small <576px ==>例如：col-2，col-6

使用.col-sm- for small ≥576px ==>示例：.col-sm-2，.col-sm-6

使用.col-md- for Medium ≥768px ==>示例：.col-md-2，.col-md-6

使用.col-lg-用于大型≥992px ==>示例：.col-lg-2，.col-lg-6

使用.col-xl-用于超大≥1200px ==>示例：.col-xl-2，.col-xl-6