css - 使用 BootStrap4 创建网格图像系统

Question

如何使用 bootstrap4 和 css3 创建这个网格图像系统？

检查这个链接，看看我想要什么

Answer 1

我在这里为您提供 HTML 和 CSS 的基本结构。您可以根据您的要求自定义样式。例如：- 网格项目之间的边距。

<div class="container">
  <div class="row">
    <div class="col-6 bg-info">
<!-- Your 1st grid item releated elements here -->
    </div>
    <div class="col-6">
      <div class="row">
        <div class="col-6 bg-secondary column">
          <!-- Your 2nd grid item releated elements here -->
        </div>
        <div class="col-6 bg-success column">
          <!-- Your 3rd grid item releated elements here -->
        </div>
        <div class="col-6 bg-danger column">
          <!-- Your 4th grid item releated elements here -->
        </div>
        <div class="col-6 bg-warning column">
          <!-- Your 5th grid item releated elements here -->
        </div>
      </div>
    </div>
  </div>
</div>

.column {
  padding-top: 25%;
}

https://codepen.io/yushanfernando/pen/GRWdQgd

仅使用 Bootstrap 4 网格系统即可实现所有这些。

如果您需要进一步的支持，请告诉我。