css - bootstrap 组合图像和模态

我正在用Bootstrap用法语制作一个网站，并且有一个名为Services Francophones的部分，它就像一个带有不同服务图片的投资组合。现在我确实减小了前8张图片的大小，因此它们更小并且彼此之间具有填充。但是填充在我的CSS中很大

.metier-item img {
     margin-bottom: 10px;
     /*margin-right: 10px;*/
}

我添加了10 px的空白边距，效果很好。现在，我试图减少图片之间的边距。因此我在右边添加了10px的边距，但是图片之间的间隔保持不变，但是每张图片的标题都被推开了。我要如何使每张图片之间具有相同的边距，我希望它们彼此靠近。单击导航栏中的link to website，然后单击服务法语。

最佳答案

如果我了解你的意思。您希望看到看起来像相同宽度的图像。

// Stretch the picture
.metier-item img {
    min-width: 100%;
    min-height: 100%;
}

// play with indentation by padding
.metier-item .metier-link {
    display: block;
    position: relative;
    padding: 5px;
}

.metier-item .metier-link:hover {} //delete

.metier-item:hover {
     transform: scale(1.04);
     padding: 0;
     margin: 0;
     z-index: 4;
}