如何用 Bootstrap 5 实现这种布局？

Question

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

这是我的标记：

    <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>

我的问题是我无法在图像左侧相交的行之间实现间隙。也许我错过了一些愚蠢的东西，但我无法弄清楚。感谢您的帮助

Answer 1

您可以重新考虑并排放置 2 列的结构，其中 1 列也包含 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>

如何用 Bootstrap 5 实现这种布局？

How can I achieve this kind of layout with Bootstrap 5?

html

css

styles

bootstrap-5