html - Bootstrap 重叠图像缩略图

Question

所以我正在使用 Bootstrap Thumbnail 网格系统，除了图像似乎重叠之外，一切看起来都很好，我无法弄清楚为什么？我也附上了一张图片。

当我将鼠标悬停在图像上时，中间的图像是否相互重叠？我不知道我是完全愚蠢还是这是我无法取胜的 Bootstrap 默认设置？

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

Answer 1

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