Bootstrap 5 nav-pill 分类精选文章栅格布局重复问题求助

问题根源 #

你当前的代码在遍历每一篇非首篇文章时，都会重复生成<div class="col-md-6 col-sm-12 col-lg-5">容器，导致每篇剩余文章都独占一个列容器，无法和首篇的col-lg-7容器横向并列，也不符合「所有剩余文章放在同一个列容器」的需求。另外原代码还存在tab-pane的id多写了#符号、tab-pane内缺少row容器包裹列的小问题，会导致布局失效、tab切换功能异常。

修复步骤 #

1. 在tab-pane容器内新增row容器，用来包裹两个并列的列
2. 在输出完首篇精选文章的col-lg-7容器后，仅打开一次col-lg-5容器，不要放在非首篇文章的循环内
3. 非首篇文章的循环仅输出内部的卡片内容，不需要包裹外层列容器
4. 所有文章遍历完成后，再依次闭合col-lg-5容器、row容器、tab-pane容器

修改后的核心代码 #

$categories =   array(
  array('tab_title'=>'catName-1'),
  array('tab_title'=>'catName-2'),
  array('tab_title'=>'catName-3'),
  array('tab_title'=>'catName-4')
);

$tab_menu = '';
$tab_content = '';
$i = 0;
foreach($categories as $row){
    if($i == 0){
        $tab_menu .= '<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-'.$row["catId"].'"> '.$row["catName"].' </a> </li>';
        // 新增row容器包裹两个列，同时去掉id里多余的#
        $tab_content .= '<div class="tab-pane show active" id="tab-'.$row["catId"].'"><div class="row">';
    } else {
        $tab_menu .= '<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-'.$row["catId"].'">'.$row["catName"].'</a> </li>';
        // 新增row容器包裹两个列
        $tab_content .= '<div class="tab-pane" id="tab-'.$row["catId"].'"><div class="row">';
    }
    
    // 注意：你原代码的$articles结构有误，当前写法是每个元素为单个字段，实际需要改成每个元素为完整的文章数组
    $articles = array(
        // 这里替换为你获取当前分类下文章的业务逻辑
    );

    $first = true;
    foreach($articles as $sub_row){
        if ($first == true) { 
            if (!empty($row['post_video_url']) OR !empty($row['post_video_embed_code'])) { 
                $show = '<div class="w-100 mb-auto d-flex justify-content-end">
                        <div class="text-end ms-auto">
                        <div class="icon-md bg-white-soft bg-blur text-white rounded-circle" title="8.5 rating">8.5</div>
                        </div>
                        </div>';
            } else {
                $show = '<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>';
            }
            $tab_content .= '
            <div class="col-md-6 col-sm-12 col-lg-7">
                <div class="card card-overlay-bottom card-img-scale">
                    <img class="card-img h-200" src="assets/fake_images/blog/4by3/06.jpg" alt="'.$sub_row['post_title'].'">
                    <div class="card-img-overlay d-flex flex-column p-3 p-sm-4">
                        '.$show.'
                        <div>
                            <a href="'.$sub_row['cat_seo_url'].'-'.$sub_row['catId'].'" class="badge bg-primary fs-6 mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>'.$sub_row['catName'].'</a>
                        </div>
                        <div class="w-100 mt-auto">
                            <h5 class="text-white"><a href="'.$sub_row['post_seo_url'].'-'.$sub_row['post_id'].'" class="btn-link text-reset stretched-link">'.$sub_row['post_title'].'</a></h5>
                            <ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block small">
                                <li class="nav-item position-relative">
                                    <div class="nav-link">by <a href="'.seo_url($sub_row['username']).'-'.$sub_row['user_id'].'" class="stretched-link text-reset btn-link">'.$sub_row['username'].'</a>
                                    </div>
                                </li>
                                <li class="nav-item">'.$sub_row['post_created_at'].'</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>';
            // 首篇输出完成后，仅打开一次剩余文章的列容器
            $tab_content .= '<div class="col-md-6 col-sm-12 col-lg-5">';
            $first = false;
        } else {
            // 非首篇仅输出卡片内容，去掉外层重复的列容器
            $tab_content .= '
            <div class="card mb-3 ml-sm-3 mx-sm-3">
                <div class="row g-3">
                    <div class="col-4">
                        <img class="rounded" src="assets/fake_images/blog/4by3/thumb/01.jpg" alt="'.$sub_row['post_title'].'">
                    </div>
                    <div class="col-8">
                        <h5><a href="'.$sub_row['post_seo_url'].'-'.$sub_row['post_id'].'" class="btn-link stretched-link text-reset fw-bold">'.$sub_row['post_title'].'</a></h5>
                        <div class="small mt-1">by '.$sub_row['username'].' - '.time_elapsed_string($sub_row['post_created_at']).'</div>
                    </div>
                </div>
            </div>';
        }
    }
    // 遍历完所有文章，依次闭合列容器、row容器、tab-pane容器
    $tab_content .= '</div></div></div>';
    $i++;
}

你原有的调用代码不需要修改，替换上述逻辑即可实现预期效果。

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