Question

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

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

我添加了10 px的边距底部，完美无缺。现在我试图减少图片之间的边距..所以我添加了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;
}

bootstrap投资组合图像＆amp;语气

1 个答案: