如何为Bootstrap 4 WordPress主题的最后一行添加唯一类？

最近我一直在琢磨怎么给Bootstrap 4栅格布局的最后一行元素加上唯一的last类，方便做特殊样式调整。一开始找了不少例子，都是教如何识别WordPress查询里的最后一篇文章，但要精准定位到栅格最后一行的起始位置，给整行元素都加上这个类，难度就大很多了。

后来我靠一些现在看来挺基础的数学计算，终于在while循环里找到了包含最后一行第一篇文章的迭代位置，成功插入了需要的last类，目前代码运行完全正常。

核心思路与代码实现 #

假设$project_columns是你设置的每行栅格列数（比如每行3列就设为3），具体实现步骤如下：

1. 先获取查询的总文章数，计算出最后一行第一个元素的位置
2. 在循环中对每篇文章计数，当计数到达最后一行起始位置时，给元素添加last类

// 获取总文章数
$total_posts = $wp_query->post_count;
// 设置每行的列数，可根据需求修改
$project_columns = 3;
// 计算最后一行第一个元素的位置
$last_row_start = ceil($total_posts / $project_columns) * $project_columns - $project_columns + 1;
// 初始化当前文章计数器
$current_post = 0;

while (have_posts()) : the_post();
    $current_post++;
    // 基础栅格列类
    $post_classes = 'col-md-' . (12 / $project_columns);
    // 判断是否属于最后一行，添加专属类
    if ($current_post >= $last_row_start) {
        $post_classes .= ' last';
    }
?>
    <div class="<?php echo esc_attr($post_classes); ?>">
        <!-- 这里放入你的文章内容模板 -->
        <h3><?php the_title(); ?></h3>
        <?php the_excerpt(); ?>
    </div>
<?php endwhile; ?>

逻辑解释 #

• ceil($total_posts / $project_columns)：计算出总共有多少行（向上取整，比如7篇文章每行3列，就是3行）
• 用总行数乘以列数，再减去列数加1，就能得到最后一行第一个元素的位置（比如7篇文章的话，最后一行起始位置是第7篇；6篇文章的话，最后一行起始位置是第4篇，完全符合栅格的排版逻辑）
• 在循环中每处理一篇文章就自增计数器，当计数器大于等于最后一行起始位置时，就给元素追加last类，这样最后一行的所有元素都会带上这个类。

这样不管总文章数是不是列数的整数倍，最后一行的所有元素都能被精准标记，方便你自定义样式（比如去掉最后一行元素的右侧间距，或者调整内边距等）。

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