求助：使用Bootstrap实现WordPress文章锯齿(Zigzag)布局

我来帮你搞定这个锯齿布局的问题！你现在的核心问题是每篇文章的列顺序完全一致，再加上手动添加的float样式和Bootstrap的网格系统冲突，导致没法实现交替排列的效果。下面是修正后的方案：

问题分析 #

1. 所有文章的图片列固定在左侧、内容列在右侧，没有交替调整列顺序
2. 手动添加的style="float:left;"会干扰Bootstrap网格的默认浮动规则，导致布局混乱
3. 虽然你的代码已经做了移动端适配（col-xs-12），但桌面端的交替逻辑缺失

修正代码 #

我们可以利用Bootstrap的**列推拉类（col-sm-push-6/col-sm-pull-6）**实现响应式的列顺序调换，这样桌面端是锯齿布局，移动端依然保持上下排列的友好体验：

<?php 
$type = 'post'; 
$args = array(
    'category__in' => array(4), 
    'post_type' => $type, 
    'posts_per_page' => 3, 
    'order' => 'DESC'
); 
$my_query = new WP_Query($args); 
$i = 1; 
while ($my_query->have_posts()) : $my_query->the_post(); 
?>
<div class="row align-items-center"> <!-- 可选：让行内元素垂直居中，提升美观度 -->
    <!-- 图片列 -->
    <div class="col-xs-12 col-sm-6 <?php if($i%2 == 0) echo 'col-sm-push-6'; ?>" style="text-align: center;">
        <figure class="pro-innerpage-img">
            <?php the_post_thumbnail(); ?>
        </figure>
    </div>
    <!-- 内容列 -->
    <div class="col-xs-12 col-sm-6 <?php if($i%2 == 0) echo 'col-sm-pull-6'; ?>">
        <div class="title_content">
            <h4><?php the_title();?></h4>
            <div><?php the_content(); ?></div>
        </div>
    </div>
</div>
<?php 
$i++; 
endwhile; 
wp_reset_query(); 
?>

关键修改点说明 #

• 移除了手动的float:left样式：Bootstrap网格系统自带浮动逻辑，手动添加会破坏原有布局
• 新增列推拉类：当$i为偶数时，col-sm-push-6和col-sm-pull-6会在屏幕宽度≥768px时交换图片与内容列的位置，实现锯齿效果
• 保留col-xs-12：在移动端（屏幕<768px）时，图片和内容自动上下排列，保证移动端可读性
• 可选的align-items-center：添加到row上让图片和内容垂直居中，让布局更协调

额外优化建议 #

如果希望文章之间有间距，可以给.row添加mb-4（Bootstrap 4+）或者自定义margin-bottom: 2rem;的样式，让整体布局更透气。

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