PHP输出col-sm-4布局异常：仅首个元素入列其余错位

数据老陈

2026-5-29

问题排查与修复方案

嘿，我仔细看了你的代码，一眼就发现两个导致布局混乱的核心问题：

col-sm-4的位置放错了：你把这个列容器放在了foreach循环外面，结果只有第一个团队卡片被正确包裹，后面的卡片直接“跑”出了列布局，自然排版乱掉。
缺少Bootstrap栅格必需的row容器：Bootstrap的栅格规则是「row包含col」，你现在直接在col-sm-6里嵌套col-sm-4，没有外层row来约束列的排列，这也会干扰布局计算。

另外还发现一个小bug：你的<div class="card"标签没写闭合的>，这会导致HTML解析异常，也得补上。

修复后的完整代码

<div class="col-sm-6">
    <?php 
    // Team ophalen
    $team_posts = get_posts( array(
        'post_type' => 'team',
        'posts_per_page' => -1,
        'orderby' => 'title',
    ) );
    if ( $team_posts ): ?>
        <!-- 新增row容器，约束列的排列规则 -->
        <div class="row">
            <?php foreach ( $team_posts as $post ): setup_postdata($post); 
            // Foto URL
            $thumb_src = null;
            if ( has_post_thumbnail($post->ID) ) {
                $src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'team-thumb' );
                $thumb_src = $src[0];
            } ?>
                <!-- 把col-sm-4移到循环内，每个卡片都被列容器包裹 -->
                <div class="col-sm-4">
                    <div class="card" <?php if ( $thumb_src ): ?>style="background-image: url('<?php echo $thumb_src; ?>');"<?php endif; ?>>
                        <div class="card-name">
                            <span class="text-center underline"><?php the_title(); ?></span>
                        </div>
                    </div>
                </div>
            <?php endforeach; 
            // 重置post数据，避免后续查询出错
            wp_reset_postdata(); ?>
        </div>
    <?php endif; ?>
</div>