引导投资组合图像和模式

Question

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

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

我添加了一个 10 像素的边距底部，效果很好。现在我试图减少图片之间的边距。所以我添加了 10px 的边距，但图片之间的空间保持不变，但每张图片的标题都会被推开。我如何在每张图片之间保持相同的边距，我希望它们彼此靠近。 link to website 在导航栏中点击服务法语。

Answer 1

如果我没听错的话。您希望看到看起来宽度相同的图像。

// 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;
}