Html 如何使用引导将flexbox应用于图像库

使用下面的代码，当我调整视口的大小时，图像堆叠在彼此的顶部，而不是向下移动一行。我很确定这是一个引导默认值，但我不确定如何更改它。我尝试过使用

d-flex

和

d-inline-flex

属性，但我完全迷路了

HTML:

---

在引导中，您需要指定大小以使其响应。目前，您只放置了

col-4

，这意味着该列将占用容器可用空间的三分之一。这个数字是12位中的一位，因此如果您希望它占一半，您可以说

col-6

，例如

因为您只放置了

col-4

，这意味着在任何设备上，从超小型设备到更高的设备，每张照片都会占据三分之一的空间。如果你想让它们停止重叠，你需要告诉Bootstrap。可以通过更改不同尺寸的比例来实现这一点。例如，尝试使用

col-lg-4 col-md-6 col-sm-10

，使每张照片在大屏幕上占三分之一，在中屏幕上占一半，在小屏幕上占十二分之十

我在这里的代码笔中更改了它：

.gal img{
宽度：300px；
利润率：50像素；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
}

---

不要使用col-4或col，它在所有屏幕中都是严格的。。。使用col-sm-4或col-md-4可灵活查看。。。

<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>

.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);
}