时间戳

首页 > 解决方案 > 如何使用 Bootstrap 5 实现这种布局？

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

问题描述

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

这是我的布局：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>

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

标签： htmlcssstylesbootstrap-5

解决方案

您可以重新考虑与 2 col 并排的结构，其中一个 olds 也有两个具有较小 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>

推荐阅读