引导重叠图像thumbail

所以我使用的是引导缩略图网格系统，一切都正在确定距图像似乎是重叠的，我不能工作了，为什么？我也附上了一张图片。引导重叠图像thumbail

当我徘徊在中间的图像相互重叠的图像？我不知道我是否完全愚蠢，或者这是我无法赢得的引导预设？

HTML 

    <div class="top-header"class="page-header"> 
    <h1>Smile Board</h1> 
    </div> 
    <div class="container"> 

    <div class="row"> 

    <div class="col-lg-12"> 
    </div> 

    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
    <a class="thumbnail" href="#"> 
    <img class="img-responsive" src="./images/image01.png" alt=""> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
    <a class="thumbnail" href="#"> 
    <img class="img-responsive" src="./images/image02.png" alt=""> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
    <a class="thumbnail" href="#"> 
    <img class="img-responsive" src="./images/image03.png" alt=""> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
    <a class="thumbnail" href="#"> 
    <img class="img-responsive" src="./images/image04.png" alt=""> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
    <a class="thumbnail" href="#"> 
    <img class="img-responsive" src="./images/image05.png" alt=""> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
    <a class="thumbnail" href="#"> 
    <img class="img-responsive" src="./images/image06.png" alt=""> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
    <a class="thumbnail" href="#"> 
    <img class="img-responsive" src="./images/image07.png" alt=""> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
    <a class="thumbnail" href="#"> 
    <img class="img-responsive" src="./images/image08.png" alt=""> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
    <a class="thumbnail" href="#"> 
    <img class="img-responsive" src="./images/image01.png" alt=""> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
    <a class="thumbnail" href="#"> 
    <img class="img-responsive" src="./images/image02.png" alt=""> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
    <a class="thumbnail" href="#"> 
    <img class="img-responsive" src="./images/image03.png" alt=""> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
    <a class="thumbnail" href="#"> 
    <img class="img-responsive" src="./images/image04.png" alt=""> 
     </a> 
    </div> 
     </div> 


CSS 

    body { 
    font-family: 'Baloo Bhaina', cursive; 

} 

@media (min-width: 1200px) 
.container { 
    width: 1170px; 
} 


h1 { 
    text-align: center; 
} 

.page-header { 
    background-color: #EFEC86; 
    padding-top: 20px; 
    width: 1130px; 
} 

.top-header { 
    width: 1130px; 
    background-color: #EFEC86; 
    padding-top: 20px; 
    width: 1290px; 
} 

.sub { 
    background-color: #EFEC86; 
    padding-top: 20px; 
} 

img { 
    width: 100%; 
    height: auto; 
    display: block; 
    overflow: auto; 
} 

.thumbnail { 
    width: 300px; 
    height: 300px; 
    overflow: auto; 
    max-width:calc(150% - 10px); 
    margin:0 16px; 
} 

.thumbnail:hover { 
    background-color: #EFEC86; 
} 

.row { 
    margin-right: 50px; 
    margin-left: -15px; 
}

来源

2017-06-21 nattie87

代码似乎是right.in在bootover上悬停没有像这样的图像重叠。如果它发生然后尝试删除任何bg-颜色或边界悬停的image.and也不缩放图像大小的悬停。如果它的工作正常，然后确定，否则与测试代码共享jsfiddle。 –

我已经做到了，它仍然不能正常工作 – nattie87

如果你给jsfiddle测试，所以我们可以分析问题 –

为什么不增加保证金，当你徘徊每个项目。只需在.thumbnail级别上添加保证金，以便它不会破坏您的其他项目

来源

2017-06-21 10:41:24

这仍然没有工作:(使它们翻倒对方 – nattie87

你有没有试图删除保证金在'.thumbnail'类即使它不是在悬停状态？我想，为什么它会覆盖在其他的div它的原因因为利润率。 –

耶！工作，太感谢你了！ – nattie87

引导重叠图像thumbail

回答

相关问题