Bootstrap开发HTML页面实现3个盒子同一行排列问题求助

需要实现3个内容盒子同一行横向排列的效果，实际渲染与预期不符：

• 当前实际渲染效果：
  
• 预期布局效果：
  

布局失效是3处代码写法不符合Bootstrap5规则导致的：

• 首个栅格列写了不存在的类col-sm-20：Bootstrap栅格系统基于12等分设计，没有20等分的内置类，直接导致栅格计算逻辑失效
• 外层容器使用了已废弃的类no-gutter：Bootstrap5中移除了该类，控制栅格间距的类名改为g-*系列，无效类名会干扰布局渲染
• 页面存在大量重复ID（mfs/mis/mcs各出现3次）：虽然不直接触发布局问题，但违反HTML规范，易引发后续样式、脚本异常

直接替换原有对应代码即可，修正后在md及以上尺寸屏幕会自动保持三列同排：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="property-wrap mb-2 row g-0" id="pp">
  <div class="col-md-4 col-sm-4">
    <div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/smart1'">
      <figure class="mfs">
        <a href="https://supershop.ng/smart1" class="image-effect overlay">
          <img src="assets/images/smart1-logo.svg" alt="SuperShopper" style="width: 100px; height: 100px; border-radius: 100px;" class="mis">
        </a>
      </figure>
      <div class="content mcs">
        <h4 class="mb-0"><a href="https://supershop.ng/smart1">SuperShopper</a></h4>
        <div class="mb-15">
          <p>Lekki Phase 1, Lekki</p>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-4 col-sm-4">
    <div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/green_way'">
      <figure class="mfs">
        <a href="https://supershop.ng/green_way" class="image-effect overlay">
          <img src="assets/images/green_way.png" alt="GreenWay Supermarket" style="width: 100px; height: 100px; border-radius: 100px;" class="mis">
        </a>
      </figure>
      <div class="content mcs">
        <h4 class="mb-0"><a href="https://supershop.ng/green_way">GreenWay Supermarket</a></h4>
        <div class="mb-15">
          <p>142 Lekki - Epe Expressway, Beside Monarch Event Center, Lekki</p>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-4 col-sm-4">
    <div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/pjv1'">
      <figure class="mfs">
        <a href="#" class="image-effect overlay">
          <img src="assets/images/pjv.png" alt="PJV Supermarket" style="width: 100px; height: 100px; border-radius: 0px;" class="mis">
        </a>
      </figure>
      <div class="content mcs">
        <h4 class="mb-0"><a href="https://supershop.ng/pjv1">PJV Supermarket</a></h4>
        <div class="mb-15">
          <p>36b Kusenla Road, Ikate Elegushi, Lekki</p>
        </div>
      </div>
    </div>
  </div>
</div>

• 如果需要在手机端（屏幕宽度小于576px）也保持三列同排，把三个列的类名统一改为col-4即可，该类会在所有屏幕尺寸下让列宽占父容器的1/3
• 如果替换代码后仍存在错位，检查自定义CSS中是否给.col-md-4、.ppt-list等类设置了width: 100%、float、position相关属性，这类自定义样式会覆盖Bootstrap默认栅格规则
• 原代码中重复的ID已经全部替换为class，避免后续开发时出现选择器匹配错误

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