如何使用引导程序在 HTML 中制作钻石 col/rows

Question

我正在根据设计制作一个网站，它有一个 div：

我正在努力做到，但我真的不知道该怎么做。

这就是我所拥有的（我知道这不是太多，但我不知道如何继续）

<div class="logos card-deck row m-auto dflex align-items-center justify-content-center">
      <div class="card cardLogos col-lg-4 col-md-3 col-sm-12">
              <div class="cardTitle "><a href="#" target="_blank"><img data-aos="fade-up" src="assets/images/hostinger.svg" width="64px" alt="Descentraliced"></a></div>
      </div>
</div>

Answer 1

使用 flexbox 创建容器：<div class="d-flex flex-row justify-content-center"></div>
通过添加 5 个子包装器创建 5 列：<div class="d-flex flex-column justify-content-center"></div>
将卡片放在这些子包装器中（弹性方向：列）。
使用间隙-class将它们space分开。

/* for demonstration purpose only */
.demo-div {
  height: 15vh;
  width: 17vw;
  background-color: red;
}

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="d-flex flex-row justify-content-center gap-2">

  <div class="d-flex flex-column justify-content-center gap-2">
    <div class="demo-div"></div>
  </div>
  
  <div class="d-flex flex-column justify-content-center gap-2">
    <div class="demo-div"></div>
    <div class="demo-div"></div>
  </div>
  
  <div class="d-flex flex-column justify-content-center gap-2">
    <div class="demo-div"></div>
    <div class="demo-div"></div>
    <div class="demo-div"></div>
  </div>
  
  <div class="d-flex flex-column justify-content-center gap-2">
    <div class="demo-div"></div>
    <div class="demo-div"></div>
  </div>
  
  <div class="d-flex flex-column justify-content-center gap-2">
    <div class="demo-div"></div>
  </div>
  
</div>

如何使用引导程序在 HTML 中制作钻石 col/rows

How to make diamond col/rows in HTML with boostrap

html

css

bootstrap-4

bootstrap-5