Как я могу добиться такого макета с помощью Bootstrap 5?

#html #css #styles #bootstrap-5

#HTML #css #стили #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>

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

Ответ №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>