Bootstrap 5 & Masonry - 对齐 1 张大图和 4 张小图

Question

我是 Bootstrap 的新手，我想在桌面视图中制作一个大图片旁边有 4 个小图片的砌体设计。在移动设备上，图片应具有相同的大小并在彼此下方对齐。

这就是我的目标： wanted design

这是它在桌面视图中的样子。移动工作正常。 current Desktop design

这是我现在的代码。我正在使用 bootstrap 主页上推荐的 masonry-layout 作为插件。我怎样才能使这项工作？

<section class="container-xl py-5">
  <div class="row bg-secondary py-3" data-masonry='{"percentPosition": true }'>
    <div class="col-sm-12 col-md-6 py-3">
      <img class="w-100" src="https://picsum.photos/1000" alt="pic1">
    </div>
    <div class="col-sm-12 col-md-3 py-3">
      <img class="w-100" src="https://picsum.photos/1000" alt="pic2">
    </div>
    <div class="col-sm-12 col-md-3 py-3">
      <img class="w-100" src="https://picsum.photos/1000" alt="pic3">
    </div>
    <div class="col-sm-12 col-md-3 py-3">
      <img class="w-100" src="https://picsum.photos/1000" alt="pic4">
    </div>
    <div class="col-sm-12 col-md-3 py-3">
      <img class="w-100" src="https://picsum.photos/1000" alt="pic5">
    </div>
  </div>
</section>

Answer 1

给你...

请参阅下面的代码段。

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>

</head>

<body>

  <section class="container-xl py-5">
    <div class="row bg-secondary py-3" data-masonry='{"percentPosition": true }'>
      <div class="col-sm-12 col-md-6">
        <div class="col-sm-12 col-md-12 py-3">
          <img class="w-100" src="https://picsum.photos/1000" alt="pic2">
        </div>
      </div>
      <div class="col-sm-12 col-md-3">
        <div class="col-sm-12 col-md-12 py-3">
          <img class="w-100" src="https://picsum.photos/1000" alt="pic2">
        </div>
        <div class="col-sm-12 col-md-12 py-3">
          <img class="w-100" src="https://picsum.photos/1000" alt="pic3">
        </div>
      </div>
      <div class="col-sm-12 col-md-3">
        <div class="col-sm-12 col-md-12 py-3">
          <img class="w-100" src="https://picsum.photos/1000" alt="pic4">
        </div>
        <div class="col-sm-12 col-md-12 py-3">
          <img class="w-100" src="https://picsum.photos/1000" alt="pic5">
        </div>
      </div>
    </div>
  </section>

</body>

</html>

Bootstrap 5 & Masonry - 对齐 1 张大图和 4 张小图

Bootstrap 5 & Masonry - Align 1 big picture and 4 small ones

masonry

bootstrap-5