Html 使用CSS在Twitter引导行中以100%宽度并排获得多个成比例的图像

我有7个图像，我试图在一行内水平显示。我在用bootstrap写这个。我努力实现的目标应该是这样的：

当页面调整大小时，这些图像应保持彼此成比例，直到最终在mobile（425px及以下）时，它们应折叠成1列行

到目前为止，我所尝试的是：

HTML:

当我这样做时，它确实会让图像彼此相邻，但是它们太宽了，并且不适合页面/窗口的宽度

看这个

我也试过：

CSS:

---

但这也不起作用。有什么想法吗？

将

最大宽度：100%

添加到图像中，它们将显示在水平行中。如果没有这一点，它们就会让家长们满腹牢骚。然后，您可以使用

col-*

类在断点处重新组织为列，或者只需使用

@media

查询并切换

弹性方向

。缩略图行{
显示器：flex；
}
.缩略图{
显示：内联块；
/*宽度：14.286%*/
/*高度：50px*/
最大宽度：100%；
}
@介质（最大宽度：425px）{
.缩略图行{
弯曲方向：立柱；
}
}

是的，它已经开始工作了-有什么建议导致它们在425像素及以下崩溃吗？这迫使我等待接受你的答案，但它现在工作得很好-谢谢。

<div class="row thumbnail-row">

<div>
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/hamburger-thumbnail.jpg"/>
</div>

<div>
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/yoyomoi-thumbnail.jpg"/>
</div>

<div>
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/dogs-thumbnail.jpg"/>
</div>

<div>
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/gateway-thumbnail.jpg"/>
</div>

<div>
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/chameleon-thumbnail.jpg"/>
</div>

<div>
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/adrienne-thumbnail.jpg"/>
</div>

<div>
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/castaway-thumbnail.jpg"/>
</div>

</div><!--end row-->

.thumbnail-row {
display: flex;
}

.thumbnail-image {
display: inline-block;
/*width: 14.286%;*/
/*height: 50px;*/
}

.thumbnail-row {
display: flex;
overflow: hidden;
}

.thumbnail-image {
width: 14.286%;
float: left;
}