如何通过Bootstrap 5实现这种布局？

问题描述

我想使用Boostrap 5实现布局，但我没有做到。 这是我想要的布局： layout example

这是我的布局：https://jsfiddle.net/7rpmqsc0/

这是我的标记：

    <div class="row">
        <div class="col-6">
            <div class="row">
                <div class="col-12">
                    <img data-src="https://via.placeholder.com/600x300" class="img-fluid w-100 lazyload" alt="...">
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <img data-src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
                </div>
                <div class="col-6">
                    <img data-src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
                </div>
            </div>
        </div>
        <div class="col-6">
            <img data-src="https://via.placeholder.com/600x600" class="img-fluid w-100 lazyload" alt="...">
        </div>
    </div>

我的问题是我无法在图像在左侧相遇的行之间形成间隙。也许我缺少一些愚蠢的东西，但我无法弄清楚。谢谢您的帮助

解决方法

您可以并排考虑2列的结构，其中一个旧的还有两列具有较小的img。：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

<!--left col also styled as a row -->
  <div class="col-6 row">
  
  <!-- first row of that col -->
    <img src="https://via.placeholder.com/600x300" class="img-fluid w-100 lazyload" alt="...">
    
  <!-- second row of that col with 2 col-6 -->
  <div class="col-6 mt-auto">
      <img src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
    </div>
    
    <div class="col-6 mt-auto">
      <img src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
    </div>
  </div>
  
  <!-- right column -->
  <div class="col-6">
    <img src="https://via.placeholder.com/600x600" class="img-fluid w-100 lazyload" alt="...">
  </div>
  
</div>