bootstrap投资组合图像&语气

时间:2017-06-25 08:03:49

标签: css twitter-bootstrap padding

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

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

我添加了10 px的边距底部,完美无缺。现在我试图减少图片之间的边距..所以我添加了10px的边距 - 但图片之间的空间保持不变但每个图像的标题形式都被推开了。如何在每张图片之间获得相同的边距,我希望它们彼此更接近。导航栏中的link to website点击服务法语。

1 个答案:

答案 0 :(得分:0)

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

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