如何手写代码实现Bootstrap 5 框架结构？

案例1：

灵活布局, 等宽布局框架, 每一个 .col 宽度相同。 

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

案列2 经典的3栏 样式

Superior Service

Our service tenet is to produce accurate and professional home fingertip oximeter to customers.

Innovative design

We are mainly engaged in various health home medical devices and continue to develop innovative oximeter.

High Quality

Experienced quality inspectors will conduct strict inspections on each oximeter and other home devices product.

源代码如下：

<div class="row row-cols-1 row-cols-md-3 gx-3">
  <div class="col ">
    <div class="item-features w3-panel w3-padding-16 w3-shadow m-2">
      <img src="https://via.placeholder.com/720x480" alt="Superior Service" class="img-fluid" width="62" height="60" loading="lazy">
      <div class="box">
        <h3 class="underline">Superior Service</h3>
        <p>Our service tenet is to produce accurate and professional home fingertip oximeter to customers.</p>
      </div>
    </div>
  </div>
  <div class="col ">
    <div class="item-features w3-panel w3-padding-16 w3-shadow m-2">
      <img src="https://via.placeholder.com/720x480" alt="Innovative design" class="img-fluid" width="62" height="60" loading="lazy">
      <div class="box">
        <h3 class="underline">Innovative design</h3>
        <p>We are mainly engaged in various health home medical devices and continue to develop innovative oximeter.</p>
      </div>
    </div>
  </div>
  <div class="col ">
    <div class="item-features w3-panel w3-padding-16 w3-shadow m-2">
      <img src="https://via.placeholder.com/720x480" alt="High Quality" class="img-fluid" width="62" height="60" loading="lazy">
      <div class="box">
        <h3 class="underline">High Quality</h3>
        <p>Experienced quality inspectors will conduct strict inspections on each oximeter and other home devices product.</p>
      </div>
    </div>
  </div>
</div>