Как управлять bootstrap высотой мансарды?

Question

Я не понимаю, как изменить высоту моего столбца таким образом, чтобы в моем первом и втором столбце было три элемента. Я новичок в элементах дизайна, поэтому небольшая помощь будет мне очень полезна

Мокап, который я хочу создать:

Мой код выглядит вот так:

<div class="card-columns pl-5 pr-5">
<!-- col 1-->
  <div class="mb-3">
      <h1>Lorem Ipsum</h1>
  </div>
  <div class="card">
      <img class="card-img-top" src="assets/Familly-card-hide.png" alt="Card image cap">
  </div>
  <div class="card">
      <img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
  </div>
  <!-- col 2-->
  <div class="card">
      <img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
  </div>
  <div class="card">
      <img class="card-img-top" src="assets/Dog-card-hide.png" alt="Card image cap">
  </div>
  <div>
          <span>Lorem ipsum ipsum<img src="assets/Circle-arow-btm.png" alt=""
                                         style="padding-left: 10px; transform: rotate(270deg);"> </span>
  </div>
  <!-- col 3-->
  <div class="card" style="width: 300px;height: auto;">
      <img class="card-img-top" src="assets/Fried-card-hide.png" alt="Card image cap">
  </div>
  <div class="card" style="width: 300px;height: auto;">
      <img class="card-img-top" src="assets/work-card-hide.png" alt="Card image cap">
  </div>
</div>

Надеюсь, вы поможете мне понять, как работает масонство, и помогите мне с этим кодом.

Answer 1

Bootstrap Кладка с использованием .card-columns не является таким гибким решением для этого случая. Лучше использовать простую сетку Bootstrap. Я сделал три столбца: .col-sm-6, .col-sm-4 и .col-sm-2. Как вы, наверное, теперь знаете, сетка BS состоит из 12 столбцов, поэтому у нас здесь 6 + 4 + 2 = 12 столбцов. В моем примере размеры блоков будут зависеть от пропорций изображения внутри. Класс .img-fluid создает изображения max-width: 100%;, чтобы они не порвали родительский блок.

Этот пример сделан, например, с использованием только класса Bootstrap 4. Если вы хотите добавить какую-то конкретную настройку c - вам нужно будет написать дополнительные CSS классы и их свойства.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container mt-5">
  <div class="row">
    <!-- col 1-->
    <div class="col-sm-6 px-1">
      <div class="mb-2">
        <h1>Lorem Ipsum</h1>
      </div>
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x600">
      </div>
      <div class="mb-2 text-right">
        <img class="img-fluid w-75" src="https://via.placeholder.com/1000x600">
      </div>
    </div>
    <!-- col 2-->
    <div class="col-sm-4 mt-1 px-1">
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x600">
      </div>
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1000">
      </div>
      <div class="text-right">
        <span>Lorem ipsum ipsum<img src="https://via.placeholder.com/36x36" alt=""style="margin-left: 10px; transform: rotate(270deg);"> </span>
      </div>
    </div>
    <!-- col 3-->
    <div class="col-sm-2 px-1">
      <div class="mb-2 mt-4">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1300">
      </div>
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1100">
      </div>
    </div>
  </div>
</div>

Подробнее о Bootstrap технологиях, которые я использовал в этом примере:

1. Grid https://getbootstrap.com/docs/4.0/layout/grid/
2. Расстояние https://getbootstrap.com/docs/4.0/utilities/spacing/
3. image-fluid https://getbootstrap.com/docs/4.0/content/images/
4. Размер https://getbootstrap.com/docs/4.0/utilities/sizing/