Bootstrap：列总和不足12时实现居中对齐的方案

针对你这种通过WordPress ACF重复字段循环生成Bootstrap列、想要自动让最后一行不足12列的内容居中的需求，我推荐两种高效的解决方案，不用手动给列加类：

方法一：纯CSS Flexbox方案（零PHP改动，最省心） #

Bootstrap 3默认用浮动布局实现列排列，我们可以通过自定义CSS把.row改成Flex容器，借助Flex的布局特性自动让最后一行居中：

首先添加这段自定义CSS：

/* 自定义Flex行样式 */
.row.flex-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* 保持Bootstrap默认的列间距 */
.row.flex-center [class^="col-"] {
  margin-bottom: 15px;
}

然后只需要给你的.row加上flex-center类即可，比如：

<div class="container">
  <div class="row flex-center">
    <!-- 这里是ACF循环生成的所有col-sm-3列 -->
  </div>
</div>

这种方法的优势在于完全不需要修改你的PHP循环逻辑，不管最后一行有1、2还是3个col-sm-3，都会自动居中对齐，兼容性也覆盖了绝大多数现代浏览器。

方法二：PHP动态计算偏移量（精准控制，兼容旧场景） #

如果需要兼容不支持Flex的旧浏览器，或者想要更精细的布局控制，可以在PHP循环中统计总列数，动态给最后一行的列添加偏移类：

假设你的ACF重复字段名为your_repeater_field，每列是col-sm-3（每行最多4列），代码示例如下：

<?php
$repeater_items = get_field('your_repeater_field');
$total_count = count($repeater_items);
$per_row = 4; // 12列 / 每列3份 = 4列一行
$last_row_count = $total_count % $per_row;
$is_last_row_needs_offset = $last_row_count !== 0 && $last_row_count !== $per_row;

$item_counter = 0;
if ($repeater_items): ?>
  <div class="container">
    <div class="row">
      <?php foreach ($repeater_items as $item): ?>
        <?php
        $item_counter++;
        $col_classes = 'col-sm-3';
        
        // 判断当前元素是否属于最后一行
        if ($is_last_row_needs_offset && $item_counter > ($total_count - $last_row_count)) {
          // 计算偏移量：(总列数12 - 最后一行总宽度) / 2
          $offset = (12 - $last_row_count * 3) / 2;
          // 仅当偏移量为整数时添加Bootstrap偏移类（比如最后一行2个列时，offset=3）
          if (is_int($offset)) {
            $col_classes .= " col-sm-offset-{$offset}";
          } else {
            // 偏移量为小数时，用自定义类实现居中（比如3个列时）
            $col_classes .= ' custom-center-col';
          }
        }
        ?>
        <div class="<?php echo esc_attr($col_classes); ?>">
          <?php echo $item['your_content_field']; ?>
        </div>
      <?php endforeach; ?>
    </div>
  </div>
<?php endif; ?>

对应的自定义CSS（处理偏移量为小数的情况）：

.custom-center-col {
  float: none;
  margin: 0 auto;
}

这种方法可以精准控制每一列的位置，适合对兼容性要求极高的场景。

个人更推荐第一种Flex方案，因为它代码简洁、维护成本低，完全适配动态生成的ACF字段场景。

内容的提问来源于stack exchange，提问作者user13286