Как применить flexbox к галерее изображений, используя Bootstrap

Question

Используя приведенный ниже код, когда я изменяю размер области просмотра, изображения накладываются друг на друга, а не смещаются вниз на одну строку. Я почти уверен, что это bootstrap по умолчанию, но я не уверен, как это изменить. Я пытался использовать свойства d-flex и d-inline-flex, но я довольно растерян.

HTML:

<div class="container ">
    <div class="row">
        <div class="col-4">
            <img src="Mountain-Pictures/Mountain-gallery-1.png" class="gal-img">
        </div>
        <div class="col-4">
            <img src="Mountain-Pictures/Mountain-gallery-2.png" class="gal-img">
        </div>
        <div class="col-4">
            <img src="Mountain-Pictures/Mountain-gallery-3.png" class="gal-img">
        </div>
    </div>
    <div class="row">
        <div class="col-4">
            <img src="Mountain-Pictures/Mountain-gallery-4.png" class="gal-img">
        </div>
        <div class="col-4">
            <img src="Mountain-Pictures/Mountain-gallery-5.png" class="gal-img">
        </div>
        <div class="col-4">
            <img src="Mountain-Pictures/Mountain-gallery-6.png" class="gal-img">
        </div>
    </div>
    <div class="row ">
        <div class="col-4">
            <img src="Mountain-Pictures/Mountain-gallery-7.png" class="gal-img">
        </div>
        <div class="col-4">
            <img src="Mountain-Pictures/Mountain-gallery-8.png" class="gal-img">
        </div>
        <div class="col-4">
            <img src="Mountain-Pictures/Mountain-gallery-9.png" class="gal-img">
        </div>
    </div>
</div>

CSS:

.gal-img{
    width:300px;
    margin:50px;
    box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Answer 1

В Bootstrap вам нужно указать размер, чтобы сделать его отзывчивым. На данный момент вы только поставили col-4, что означает, что столбец займет одну треть доступного пространства контейнера. Это число из 12, поэтому, если вы хотите, чтобы оно занимало половину, вы скажете, например, col-6.

Поскольку вы только поставили col-4, это будет означать, что каждая фотография занимает треть на любом устройстве от сверхмалых устройств и выше. Если вы хотите, чтобы они перестали перекрывать друг друга, вам нужно указать Bootstrap. Вы можете сделать это, изменив соотношение для разных размеров. Например, попробуйте col-lg-4 col-md-6 col-sm-10, чтобы каждая фотография занимала одну треть на больших экранах, половину на средних экранах и десять двенадцатых на маленьких экранах.

Я изменил ее в своем CodePen здесь: https://codepen.io/St3ph3n92/pen/ZEbyOOj

.gal-img{
    width:300px;
    margin:50px;
    box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-10">
            <img src="https://images.unsplash.com/photo-1559321966-04643588828f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" class="gal-img">
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10">
            <img src="https://images.unsplash.com/photo-1559321966-04643588828f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" class="gal-img">
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10">
            <img src="https://images.unsplash.com/photo-1559321966-04643588828f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" class="gal-img">
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-10">
            <img src="https://images.unsplash.com/photo-1559321966-04643588828f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" class="gal-img">
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10">
            <img src="https://images.unsplash.com/photo-1559321966-04643588828f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" class="gal-img">
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10">
            <img src="https://images.unsplash.com/photo-1559321966-04643588828f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" class="gal-img">
        </div>
    </div>
    <div class="row ">
        <div class="col-lg-4 col-md-6 col-sm-10">
            <img src="https://images.unsplash.com/photo-1559321966-04643588828f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" class="gal-img">
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10">
            <img src="https://images.unsplash.com/photo-1559321966-04643588828f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" class="gal-img">
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10">
            <img src="https://images.unsplash.com/photo-1559321966-04643588828f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" class="gal-img">
        </div>
    </div>
</div>
<script href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Если вы хотите узнать больше об этом, вы можете проверить документацию Bootstrap здесь: https://getbootstrap.com/docs/4.0/layout/grid/

Кроме того, вот еще один полезный инструмент, который я использовал, который может пригодиться, если вы используете Bootstrap: https://layoutit.com/build

Надеюсь, это поможет!