bootstrap 5 nav-pill 中的精选帖子

Question

大家好，我正在尝试在 bootstrap nav-pill 中创建一个带有类别的精选帖子。 当我点击类别时，它会在两个单独的 div 中显示该类别的 5 个内容，并将第一篇文章作为特色文章。

问题是：第一个$tab_content 没问题，这是第一个作为特色的帖子。

但第二个$tab_content 多次显示此<div class="col-md-6 col-sm-12 col-lg-5">。所以它不会内联。

应该是这样的：<div class="col-md-6 col-sm-12 col-lg-5"> 5 contents in here </div>

编辑第一个tab_content是第一篇文章：

<div class="col-md-6 col-sm-12 col-lg-7"></div>

显示 5 篇文章的第二个 tab_content 位于：

<div class="col-md-6 col-sm-12 col-lg-5"></div>

代码如下：

$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>';
      $tab_content .= '<div class="tab-pane show active" id="#tab-'.$row["catId"].'">';
    } else {
      $tab_menu .= '<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-'.$row["catId"].'">'.$row["catName"].'</a> </li>';
      $tab_content .= '<div class="tab-pane" id="tab-'.$row["catId"].'">';
    }
    

$articles = array(
  array('post_title'=>'some text for title'),
  array('catId'=>'40'),
  array('post_desc'=>'some text for post content'),
  array('catName'=>'category name'),
  array('post_seo_url'=>'sitecom/post_url'),
  array('post_image'=>'sitecom/images/image'),
);

      $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>
                <!-- Card info -->
                <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>';
        
        $first = false;
        } else {
        $tab_content .= '
      <div class="col-md-6 col-sm-12 col-lg-5">
        <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="">
              </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>
        </div>';
          }
       }
      $tab_content .= '</div>';
      $i++;
  }

这是用法：

<div class="row">
<?php require_once('modules/tabs.php'); ?>
   <ul class="nav nav-tabs nav-tabs-line">
    <?php echo $tab_menu; ?>
   </ul>
  <div class="tab-content">
    <?php echo $tab_content; ?>
  </div> 
</div> 

提前感谢所有帮助。

Answer 1

我希望这个答案对你有所帮助。 我重新排列了您的类别和文章数组，因为数组中没有一些数据。 并在文章foreach循环中添加了if条件以打印相关的类别标签数据。

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>

<?php
$categories =   array(
  array('tab_title'=>'catName-1','catId'=>1,'catName'=>'catName-1'),
  array('tab_title'=>'catName-2','catId'=>2,'catName'=>'catName-2'),
  array('tab_title'=>'catName-3','catId'=>3,'catName'=>'catName-3'),
  array('tab_title'=>'catName-4','catId'=>4,'catName'=>'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>';
      $tab_content .= '<div class="tab-pane show active" id="tab-'.$row["catId"].'">';
    } else {
      $tab_menu .= '<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-'.$row["catId"].'">'.$row["catName"].'</a> </li>';
      $tab_content .= '<div class="tab-pane" id="tab-'.$row["catId"].'">';
    }
 
$articles = array(
  array(
  'post_title'=>'some text for title cat1',
  'post_id'=>'1',
  'catId'=>'1',
  'post_desc'=>'some text for post content',
  'catName'=>'category name',
  'post_seo_url'=>'sitecom/post_url',
  'post_image'=>'sitecom/images/image',
  'cat_seo_url'=> 'url',
  'username'=>'username',
  'user_id'=>'id',
  'post_created_at'=>date('Y-m-d')
  ),
  array(
  'post_title'=>'some text for title cat 2',
  'post_id'=>'1',
  'catId'=>'2',
  'post_desc'=>'some text for post content',
  'catName'=>'category name',
  'post_seo_url'=>'sitecom/post_url',
  'post_image'=>'sitecom/images/image',
  'cat_seo_url'=> 'url',
  'username'=>'username',
  'user_id'=>'id',
  'post_created_at'=>date('Y-m-d')
  ),
  array(
  'post_title'=>'some text for title cat3',
  'post_id'=>'1',
  'catId'=>'3',
  'post_desc'=>'some text for post content cat3',
  'catName'=>'category name',
  'post_seo_url'=>'sitecom/post_url',
  'post_image'=>'sitecom/images/image',
  'cat_seo_url'=> 'url',
  'username'=>'username',
  'user_id'=>'id',
  'post_created_at'=>date('Y-m-d')
  ),
  array(
  'post_title'=>'some text for title cat4',
  'post_id'=>'1',
  'catId'=>'4',
  'post_desc'=>'some text for post content cat4',
  'catName'=>'category name',
  'post_seo_url'=>'sitecom/post_url',
  'post_image'=>'sitecom/images/image',
  'cat_seo_url'=> 'url',
  'username'=>'username',
  'user_id'=>'id',
  'post_created_at'=>date('Y-m-d')
  ),
);

      $first = true;
      foreach($articles as $sub_row){

       if($sub_row['catId'] == $row['catId']){

                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="">
                          '.$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>
                            <!-- Card info -->
                            <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="'.$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>';
                    
                    $first = false;
                
                } else {
                
                    $tab_content .= '
                      <div class="col-md-6 col-sm-12 col-lg-5">
                        <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="">
                              </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'].' - '.$sub_row['post_created_at'].'</div>
                              </div>
                            </div>
                          </div>
                        </div>';
                  }
              }
       }
      $tab_content .= '</div>';
      $i++;

  }
?>
   <ul class="nav nav-tabs nav-tabs-line">
    <?php echo $tab_menu; ?>
   </ul>
  <div class="tab-content">
    <?php echo $tab_content; ?>
  </div> 




</body>
</html>