引导重叠图像缩略图答案

【问题标题】：Bootstrap overlapping images thumbail引导重叠图像缩略图
【发布时间】：2017-11-24 05:03:34
【问题描述】：

所以我使用的是 Bootstrap Thumbnail 网格系统，除了图像似乎重叠之外，一切看起来都很好，我不知道为什么？我也附上了一张图片。

当我将鼠标悬停在图像上时，中间的图像会相互重叠吗？我不知道我是完全愚蠢还是这是我无法获胜的引导默认值？

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

【问题讨论】：

代码似乎是正确的。在悬停时的引导程序中没有类似的东西，所以图像会重叠。如果它发生然后尝试删除图像悬停时的任何 bg-color 或边框。也不要缩放图像悬停时的大小。如果它工作正常，则可以，否则与测试代码共享 jsfiddle。
我已经这样做了，但仍然无法正常工作
如果你给jsfiddle测试，我们可以分析问题
只需访问jsfiddle.net并在此处添加代码并保存代码，然后在此处分享该网址
在使用 bootstrap 后，您正在为缩略图使用宽度和高度。它不是必需的。

标签： html css twitter-bootstrap grid

【解决方案1】：

为什么在悬停每个项目时不添加边距。只需在 .thumbnail 类悬停时添加边距，这样它就不会破坏您的其他项目

【讨论】：

那还是不行 :( 让他们互相倾倒
您是否尝试过删除.thumbnail 类中的边距，即使它不是处于悬停状态？我认为它会覆盖其他 div 的原因是因为边距。
还有一个问题，要让它在移动设备上响应，我该怎么做？
如果你想让它在移动设备上响应，不要固定thumbnail类的宽度和高度，否则你可以使用@media查询。