如何使用Bootstrap 5与PHP为不同精选文章设置独立行展示样式

需求说明 #

我正在用Bootstrap 5开发分类nav-pill导航，布局采用两列结构：第一列放置1篇精选文章，第二列展示5篇普通文章。

我尝试的写法没有达到预期效果，所有文章会被拆分到不同列中并排显示，示例代码如下：

$sql = "SELECT * FROM articles WHERE article_id = ? ORDER BY article_id DESC";
$result = $pdo->prepare($sql);
$result->execute([$cats['cat_id']]);
if ($result->rowCount() > 0) {
    $array = array('class 1', 'class 2');    
    $i=0;  
    while($row = $result->fetch()) { ?>
     <div class="<?php $array[$i];?>">
     </div>
    <?php 
     $i++;
    } 
}
?>

我写的HTML结构代码如下：

<div class="row">
<!-- 第一列：精选文章 -->
  <div class="col-sm-6">
    <div class="whats-news-single mb-40 mb-40">
      <div class="whates-img">
        <img src="..." alt="">
      </div>
      <div class="whates-caption">
        <a href="latest_news.html">Secretart for Economic Air plane that looks like</a>
        <p>Struggling to sell one the market won’t stop actress and the and singer Jennifer Lopez.</p>
        <span class="small">by Alice cloe - Jun 19, 2020</span>
      </div>
    </div>
  </div>
  
<!-- 第二列：展示5篇普通文章 -->
  <div class="col-sm-6">
    <div class="card mb-3">
      <div class="row g-3">
        <div class="col-4">
          <img class="rounded" src="..." alt="">
        </div>
        <div class="col-8">
          <h6><a href="post-single-2.html" class="btn-link stretched-link text-reset fw-bold">The pros and cons of business agency</a></h6>
          <div class="small mt-1">May 17, 2021</div>
        </div>
      </div>
    </div>
    <div class="card mb-3">
      <div class="row g-3">
        <div class="col-4">
          <img class="rounded" src="..." alt="">
        </div>
        <div class="col-8">
          <h6><a href="post-single-2.html" class="btn-link stretched-link text-reset fw-bold">5 reasons why you shouldn't startup</a></h6>
          <div class="small mt-1">Apr 04, 2021</div>
        </div>
      </div>
    </div>
    <div class="card mb-3">
      <div class="row g-3">
        <div class="col-4">
          <img class="rounded" src="..." alt="">
        </div>
        <div class="col-8">
          <h6><a href="post-single-2.html" class="btn-link stretched-link text-reset fw-bold">Ten questions you should answer truthfully.</a></h6>
          <div class="small mt-1">Jun 30, 2021</div>
        </div>
      </div>
    </div>
    <div class="card mb-3">
      <div class="row g-3">
        <div class="col-4">
          <img class="rounded" src="..." alt="">
        </div>
        <div class="col-8">
          <h6><a href="post-single-2.html" class="btn-link stretched-link text-reset fw-bold">Five unbelievable facts about money.</a></h6>
          <div class="small mt-1">Nov 29, 2021</div>
        </div>
      </div>
    </div>
  </div>
</div>

最终实现效果参考对应设计图。

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