Галерея миниатюр в Bootstrap 4

Question

Мне было интересно, как создать следующий эскиз в lg в Bootstrap 4:

У меня есть следующий код из этого шаблона (https://startbootstrap.com/template-overviews/thumbnail-gallery/):

<div class="col-lg-6 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image1.jpg" alt="">
      </a>

<div class="col-lg-3 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image2.jpg" alt="">
      </a>
</div>

<div class="col-lg-3 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image3.jpg" alt="">
</a>
</div>

<div class="col-lg-3 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image4.jpg" alt="">
</a>
</div>

<div class="col-lg-3 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image5.jpg" alt="">
</a>
</div>

Проблема, с которой я столкнулся, заключается в том, что последние 2 деления появляются под большим делением, что имеет смысл из-за системы сетки из 12 столбцов. Когда я помещаю еще один элемент LG-6 под текущим, между двумя верхними миниатюрами и двумя нижними миниатюрами слишком много места. То же самое происходит, когда я добавляю разрыв строки после первых двух уменьшенных изображений.

Спасибо

Answer 1

Пример StartBootstrap предназначен только для показа изображений одинакового размера (, например ). Теперь, когда Bootstrap 4 является flexbox, строки будут иметь одинаковую высоту, поэтому последние 2 изображения в сценарии с неравномерной сеткой будут перенесены в следующую строку.

Один «обходной путь» - отключить flexbox на md и использовать вместо него float ...

<div class="container py-4">
    <div class="row d-md-block">
        <div class="col-md-6 float-md-left">
            <a href="link" class="d-block h-100">
                <img class="img-fluid" src="//placehold.it/600" alt="">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6 pb-1 float-md-left">
            ..
        </div>
        <div class="col-lg-3 col-md-4 col-6 pb-1 float-md-left">
            ...
        </div>
        <div class="col-lg-3 col-md-4 col-6 pb-1 float-md-left">
            ..
        </div>
        <div class="col-lg-3 col-md-4 col-6 pb-1 float-md-left">
            ..
        </div>
    </div>
</div>

https://www.codeply.com/go/gG7VGlmvDC

Или просто создайте 2 отдельных столбца, 1 для большого изображения и 1 для вложенной сетки 4x4.

<div class="container py-4">
    <div class="row">
        <div class="col-md-6">
            <a href="“link”" class="d-block h-100 mb-4">
                <img class="img-fluid" src="//placehold.it/600" alt="">
            </a>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-6">
                    ..
                </div>
                <div class="col-6">
                    ..
                </div>
                <div class="col-6">
                    ..
                </div>
                <div class="col-6">
                    ..
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/xrwLgBoK20

Примечание: в Bootstrap 4

больше нет -xs